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

在我的网站主页上，我想展示很多图片很大的产品。当前页面加载时间太长，以至于实际上超时，页面无法显示

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

---

我假设这需要一些javascript/jQuery…

首先，需要检查图像的大小是否太大，是否只是缩放到适合页面的尺寸。为了使加载时间尽可能好，图像应该是您想要显示它们的确切大小，72dpi，而不是更多。图像最有可能在第一次获取后被缓存，因此这应该只是一次性成本

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

我倾向于只将

url

返回到AJAX请求中的图像。事实上，您甚至不必将其设置为AJAX请求。您可以向其中的图像发送一个包含

URL

的JavaScript字符串数组，然后在用户将鼠标悬停在图像的特定占位符上时创建一个新的

Image

元素（或类似元素）

---

希望这能给你一些想法

首先，值得检查的是，您的图像的大小不是巨大的，只是缩放到适合页面的尺寸。为了使加载时间尽可能好，图像应该是您想要显示它们的确切大小，72dpi，而不是更多。图像最有可能在第一次获取后被缓存，因此这应该只是一次性成本

我倾向于只将

url

返回到AJAX请求中的图像。事实上，您甚至不必将其设置为AJAX请求。您可以向其中的图像发送一个包含

URL

的JavaScript字符串数组，然后在用户将鼠标悬停在图像的特定占位符上时创建一个新的

Image

元素（或类似元素）

---

希望这能给你一些想法

谢谢，真不敢相信这有多简单……你能解释一下为什么吗？我不太明白这是怎么回事？是因为javascript在页面内容加载后运行吗？@James，浏览器加载HTML。一旦它遇到

属性并发送额外的并行请求来获取它。由于ajax加载程序映像很小，因此获取它的速度相当快。获取后，它将显示在屏幕上，并引发
onload
事件。如果用户禁用了javascript，那么一切都到此结束。另一方面，如果启用，它首先分离
onload
事件，并修改
src
属性以指向大图像。修改此属性后，将发送另一个异步请求来获取此图像，并在加载后显示该图像。谢谢，真不敢相信这有多简单…您能解释一下原因吗？我不太明白这是怎么回事？是因为javascript在页面内容加载后运行吗？@James，浏览器加载HTML。一旦它遇到
属性并发送额外的并行请求来获取它。由于ajax加载程序映像很小，因此获取它的速度相当快。获取后，它将显示在屏幕上，并引发
onload
事件。如果用户禁用了javascript，那么一切都到此结束。另一方面，如果启用，它首先分离
onload
事件，并修改
src
属性以指向大图像。修改此属性后，将发送另一个异步请求以获取此图像，并在加载后显示。感谢您的建议。图像质量非常好，因此它们的范围从3kb到12kb不等。就新闻部而言，他们都是96人。这将是一个相当大的工作，实际上手动调整这些。谢谢你的建议。图像质量非常好，因此它们的范围从3kb到12kb不等。就新闻部而言，他们都是96人。这将是一个相当大的工作，实际上手动调整这些。
<img src="ajax-loader.gif" id="myimg" />

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