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請求。 您可以發送一個JavaScript字符串數組，其中包含圖像的urls ，然后當用戶將鼠標懸停在圖像的特定占位符上時，創建一個新的Image元素（或類似元素）。

希望能給您一些想法！