1

On the home page of my site I want to display a lot of products which have images which are quite large. Currently the page is taking so long to load that it is actually timing out and the page fails to display!

In MVC, or just ASP.NET in general, how can I load an image asynchronously? Basically what I want to do is display the details of the product and just display a small loading image e.g. ajaxload.info. until the image is loaded.

I assume this is going to require some javascript/jQuery...

4

2 回答 2

7 
<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-27T18:39:45.763 回答
2

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

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

希望这给了你一些想法！

于 2010-07-27T18:43:47.590 回答