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

【问题标题】：ASP.NET MVC - How do I load an image asynchronously?ASP.NET MVC - 如何异步加载图像？
【发布时间】：2010-07-27 18:34:47
【问题描述】：

在我网站的主页上，我想展示很多图片很大的产品。目前，页面加载时间过长，实际上已经超时，页面无法显示！

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

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

【问题讨论】：

【解决方案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';
    });
});

【讨论】：

谢谢，简直不敢相信这是多么简单……您能解释一下为什么吗？我不太明白它是如何工作的？是因为javascript在页面内容加载后运行？
@James，浏览器加载 HTML。一旦遇到<img> 标签，它就会分析它的src 属性并发送一个额外的并行请求来获取它。由于 ajax 加载器图像很小，因此获取速度相当快。获取后，它会显示在屏幕上并引发onload 事件。如果用户禁用了 javascript，那么一切都将在此时结束。另一方面，如果启用它，它首先分离onload 事件并修改src 属性以指向大图像。一旦这个属性被修改，另一个异步请求被发送来获取这个图像，一旦加载它就会显示出来。

【解决方案2】：

首先，值得检查的是您的图片尺寸是否过大，并且只是缩放到适合页面的尺寸。为了尽可能缩短加载时间，图像应该是您想要显示它们的确切尺寸，72dpi 不超过。这些图像很可能会在第一次获取后被缓存，因此它应该只是一次性成本。

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

希望这能给你一些想法！

【讨论】：