Lazyload圖像在三個CSS3列

我有一個網站，顯示圖像的三列。這些都是應用column-count: 3的div中的img標籤。Lazyload圖像在三個CSS3列

這些列包含超過一百張圖片，我想延遲加載以節省帶寬。

有很多Javascript插件可用，如http://www.appelsiini.net/projects/lazyload，當不使用column-count時效果很好。這些插件計算圖像的頂部偏移量，並確定圖像是否可見。

與column-count然而，這些插件無法延遲加載圖像。這可能是由於列的流動改變，然後圖像被加載引起的。

有沒有人知道如何解決這個問題有一個想法？我創建了一個小提琴，顯示HTML和CSS使用：http://jsfiddle.net/LCbTc/2/

你提到的插件有這種情況的一個選項（滾動到當圖像不連續部分）..

$("img.lazy").lazyload({ 
    failure_limit : 999 /*the 999 should be a number larger than the number of images you have*/ 
});

如該部分所述，插件假定圖像以與它們在HTML中相同的順序出現。將此選項設置爲較大的數字，即頁面中延遲加載的圖像的數量（插件的最差情況）意味着它將檢查所有圖像，並在查看視口之外的某些圖像後不停止。

演示與您的代碼更新：http://jsfiddle.net/LCbTc/1/

2014-05-06 11:53:28

感謝您的回答！我已經在生產服務器上嘗試過這種方式，但是當出現橫向和縱向圖像時會導致出現奇怪的行爲：http://jsfiddle.net/LCbTc/2/ –

@osi它在插件文檔中提到您應該指定圖像在頁面中佔據的尺寸。否則，插件無法準確計算它們是否可見或不可見。 –

這將是一個問題，因爲它們會縮放以適合列寬。所以實際上你只知道圖像加載時的尺寸。 –

我有網頁與包含圖像的兩列。我將第一列圖像的類設置爲「懶」，將第二列圖像的類設置爲「懶側欄」。然後我爲每個類調用兩次lazyload，一次。奇蹟般有效！

您可以嘗試根據您的圖像將出現在哪個列中以編程方式設置類。例如，在3列中有100個圖像我會爲前34個圖像設置類「lazy1」，爲類lazy2設置類lazy2接下來的33張圖片，其餘的爲「lazy3」。或類似的規定。祝你好運！

2014-12-31 21:50:00 Bogdan

回答