使用jquery延遲加載圖像

Question

我們的網站有幾頁顯示許多圖像。 在緩慢的互聯網頁面加載長時間與圖像完全加載。 我搜索谷歌有jquery解決方案，當用戶向下滾動頁面時，將按需下載圖像。 我發現了一個名為lazyload的jquery庫，url是http://www.appelsiini.net/projects/lazyload

這個插件很好，但我的頁面內容以及從數據庫填充的圖像。 從html編輯器插入數據庫內容。 我讀了lazyload並發現了

1） <img class="lazy" src="img/grey.gif" data-original="img/example.jpg" >

圖像src將有不同的圖像，實際的圖像路徑將寫入數據原始屬性，這是我的頁面無法實現的，因為我說我的頁面內容是由html編輯器開發的。 所以我需要幫助，如何自定義庫，因為我的圖像標記將像普通的圖像標記像<img class="lazy" src="img/example.jpg" >但它仍然有效。 如果這個庫不可能，那么建議我任何其他的庫，只下載那些在瀏覽器視口中的圖像。 我想說我的圖片標簽將是<img class="lazy" src="img/example.jpg" >但是庫只會下載瀏覽器視口中的那些圖片。 請幫忙。 或者給我任何樣本代碼，下載少量圖像，當用戶向下滾動時，其余部分將下載。 謝謝。

Answer 1

在打電話之前

$("img.lazy").lazyload();

將lazy class和data-original屬性添加到數據庫內容的所有圖像中。 例如，您在ID為“content”的div中有數據庫內容。

$("#content img").each(function() {
    $(this).addClass('lazy');
    $(this).attr('data-original', $(this).attr('src'));
});

希望它會有所幫助。