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

在我的网站的主页上，我想展示很多产品，其图像非常大。目前页面加载时间过长，实际上超时，页面无法显示！ASP.NET MVC - 如何异步加载图像？

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

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

2010-07-27 James

<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'; 
    }); 
});

来源

2010-07-27 18:39:45

谢谢，简直不敢相信那是多么简单......你能解释一下为什么吗？我不太明白这是如何工作的？是因为JavaScript运行*页面内容加载后？ – James 2010-07-27 18:50:35

@詹姆斯，浏览器加载HTML。一旦遇到''标签，它会分析它的'src'属性并发送一个额外的并行请求来获取它。由于ajax加载器映像很小，因此它的读取速度相当快。一旦获取，它将显示在屏幕上，并引发'onload'事件。如果用户禁用JavaScript，则此时所有内容都将结束。另一方面，如果启用它，则首先分离“onload”事件并修改“src”属性以指向大图像。一旦这个属性被修改，另一个异步请求被发送来获取这个图像，一旦加载它就会显示出来。 – 2010-07-27 19:08:57

感谢您的清理:) – James 2010-07-27 19:16:47

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

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

希望这给了你一些想法！

来源

2010-07-27 18:43:47

感谢您的意见。图像质量相当好，所以它们的范围可以从3kb到12kb不等。在DPI方面，它们都是96.实际上手动调整这些尺寸将是一项相当的工作。 – James 2010-07-27 18:53:05

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

回答

相关问题