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 - 如何異步加載圖像？

回答

相關問題