Javascript Lazyload隊列

Question

我在我的項目中使用jQuery LazyLoad插件來顯示一大列小圖片。這個插件非常有用，唯一的問題是，在頁面加載時，頁面/滾動/ ..很慢，因爲它一次加載所有初始（可見）圖像（大約60個40x40大小的圖像）。

如果一個接一個地加載負載之間的時間間隔，例如800ms，這將是驚人的，因爲我並不真的需要它們直接出現。我相信這會讓用戶體驗更舒適。

不幸的是，我不太喜歡Javascript。我試圖使用jQuery延遲功能，但它沒有幫助。我真的很感激任何幫助。

相關代碼：

$(self).one("appear", function() { 
     if (!this.loaded) { 
      $("<img />") 
       .bind("load", function() { 
        $(self) 
         .hide() 
         .attr("src", $(self).attr("data-original")) 
         [settings.effect](settings.effectspeed); 
        self.loaded = true; 
       }) 
       .attr("src", $(self).attr("data-original")); 
     }; 
    }); 

Answer 1

如果設置了data-origional屬性上的圖像其來源，那麼你可以在document.ready運行的財產以後這樣的：

$(function() { 
    function load_image($image) { 
     if (count >= $images.length) {clearInterval(timer); return false;} 
     $image.attr('src', $image.attr('data-origional')); 
     count++; 
    } 
    var $images = $('img'), 
     count = 0, 
     timer = setInterval(function() { 
      load_image($images.eq(count)); 
     }, 800); 
});