如何在包含500多張圖片的頁面上實現延遲加載？

我基本上有一個預訂引擎單元結果頁面，其中必須顯示40個單位和每個單位有1個大圖像的第一個縮略圖和X數字伴隨縮略圖。如何在包含500多張圖片的頁面上實現延遲加載？

我一直在使用jQuery的懶加載插件，但它不夠徹底（我在DOM Ready上調用它），再加上它在IE中沒有真正的工作（50％的客戶端使用IE，所以它是一個大問題）。

我認爲我真的需要做的不是真的吐出圖像，而是一個假元素，如跨度，並可能修改我的代碼，以便如果用戶查看跨度，將其渲染爲圖像元素。

<span src="/images/foo.gif">

的預訂引擎依賴於JS，所以我想我可能會被迫僅僅依靠ajaxifying所有的縮略圖，並有事件處理程序的窗口滾動等爲了使頁面爲「可用」和負荷平均時間（2-3秒，而不是高速DSL /電纜5-30秒）。

我很感激任何例子或想法。

相關鏈接/發現其可用於解決該有用：

＃1：http://github.com/silentmatt/jquery_lazyload

jquery的延遲加載的叉這似乎解決了IE加載和增加了對支持容器。

＃2：youtube.com將某些視頻的src設置爲1x1透明gif並在大約前10個結果左右後進行延遲加載。

更新

＃1：我們決定做一個腳本來生成縮略圖，並做他們的遞歸產生。我實現了它們。而不是每個570-160KB的縮略圖都是2KB。加載速度稍快一些，但由於570個併發請求仍然很慢，即使延遲加載程序插件已到位，但我不確定它是否足夠快地應用了（即使在DOM完全加載之前就已準備好了）。雖然取得了一些進展。

我正在考慮在前10個單元后生成1x1像素的gif，只是懶加載它們。儘管如此，仍然需要制定一項技術。

來源

2010-03-25 meder omuraliev

像這樣的東西可能：

<img lateSrc="/some/image.gif" /> 

<script> 
$(document).ready(function() { 
    $('img[lateSrc]').each(function() { 
     var t = $(this); 
     t.attr('src', t.attr('lateSrc')).removeAttr('lateSrc'); 
    }); 
}); 
</script>

來源

2010-03-25 16:45:21 MightyE

對我有同樣的想法，但顯然我不得不使它更高級一些，以便它只在您滾動查看時調用該功能。 – 2010-03-25 16:49:12

有多大的圖像？另一種方法可能是將它們下載爲一張大的平鋪圖像，然後用css sprites或類似的東西將它截取。

來源

2010-03-25 16:46:47

與此相關的問題是我們不控制圖像，這將是一個巨大的任務應用代碼，基於精靈設置每個縮略圖的背景位置。我有同樣的想法，但它確實很複雜。 – 2010-03-25 16:48:21

重新大小：可悲的是每個60-130 KB，我懷疑他們可以優化它們 – 2010-03-25 17:03:37

Web瀏覽器是非常聰明的渲染頁面有效那麼試試這個：

確保您發送的圖像的像素大小的HTML使瀏覽器可以呈現即使在圖片AREN整個頁面沒有裝，但。
填補了最重要的圖片的網址就（在服務器上），所以瀏覽器快速加載圖像成爲可能。對於所有其他圖像，請使用一個佔位符，它說「圖像正在加載...」或類似的東西。
在加載頁面時，將背景中的真實圖像替換爲佔位符（加載2-3個圖像，然後使用定時器（例如50ms）再次運行自己。

您可以通過查詢瀏覽器窗口的大小來進一步優化步驟＃3，然後詢問圖像的位置，只有當它們可見時才加載它們。

來源

2010-03-25 16:48:45

如何在包含500多張圖片的頁面上實現延遲加載？

回答

相關問題