Javascript Lazyload queue

Question

jQuery LazyLoadプラグインを使用して、小さな画像の大きな列を表示しています。プラグインは本当に助けになりますが、唯一の問題はページの読み込み時にページ/スクロール/ ..を作成することです。初期の（可視の）画像（サイズ40x40の約60画像）を一度に読み込むと遅くなります。

実際にすぐに表示する必要がないため、読み込み間に時間差（たとえば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); 
});