ASP.NET MVC - 如何异步加载图像？

Question

在我网站的主页上，我想展示很多具有相当大图像的产品。目前页面加载时间太长，实际上超时并且页面无法显示！

在MVC中，或者只是ASP.NET，我如何异步加载图像？基本上我想要做的是显示产品的细节，只显示一个小的加载图像，例如ajaxload.info。直到图像加载。

我认为这需要一些javascript / jQuery ......

Answer 1

<img src="ajax-loader.gif" onload="this.onload=null;this.src='bigimage.png';" />

或者如果你不喜欢不引人注意：

<img src="ajax-loader.gif" id="myimg" />

然后：

$(function() {
    $('#myimg').load(function() {
        $(this).unbind('load');
        this.src = 'bigimage.png';
    });
});

Answer 2

首先，值得检查的是，图片的大小并不大，只是缩放到适合页面的尺寸。为了使加载时间尽可能最佳，图像应该是您想要显示的确切尺寸，72dpi而不是更多。这些图像很可能在第一次获取后进行缓存，因此只需要一次性费用。

我倾向于只将url返回到AJAX请求中的图像。实际上，您不一定需要将其作为AJAX请求。您可以发送一个包含urls字符串的JavaScript数组，然后在用户将鼠标悬停在图像的特定占位符上时创建一个新的Image元素（或类似元素）。

希望能给你一些想法！