スクロールして画像を読み込むのが遅くなりました

Question

私はLazyを怠惰画像読み込みプラグインとして使用しています。だから私はプラグインを開始し、それが最初のもののために目に見える作品と私はスクロールすると

<div class="nano-content" id="lScroll"> 

    /*... MORE LIKE THIS ... */ 
    <div class="card"> 
     <div class="city-selected city-medium clickChampion pointer" 
    data-champ-id="1"> 
     <article> 
      <div class="info"> 
       <div class="city"> 
        CHAMPNAME 
       </div> 
      </div> 
     </article> 
      <figure class="cFigure lazy" data-src="images/champions/CHAMPNAME_0.png"></figure> 
     </div> 
    </div> 
    /*... MORE LIKE THIS ... */ 

</div> 

：

var $lazy = $('#lScroll .lazy'); 
if ($lazy.length) { 
    $lazy.Lazy({ 
     appendScroll: $('#lScroll') 
    }); 
} 

しかし、今、私はその機能を持っている私は、このようなdivをロードするdiv要素を持っています「フィルター」その属性によってdivの私は私の検索入力にSTHを入力し、それが応じてdiv要素が示されたときに画像の読み込みに失敗：

$(document).on("keyup", "#searchVod", function() { 
    var $search = $(this); 
    var $sVal = $search.val().toLowerCase(); 
    if ($sVal !== "") { 
     $(".vodCard").hide(); 
     $('[data-champ*="' + $sVal + '"]').show(); 
     $('[data-role*="' + $sVal + '"]').show(); 
    } else { 
     $(".vodCard").show(); 
    } 
}); 

は、私が試したのw bind: "event" /とワット/アウトdelay: 0（検索機能でプラグインを読み込んでいます）が、私が検索したときにすぐにすべての画像がバックグラウンドで読み込まれてしまいました。

任意のヒントは非常に

UPDATEを感謝：私は（それはいくつかの時間がかかり、その最後の場合、それはすべての画像、最終的に私が（探しています1をロードし、私の検索ボックスに1つの文字を入力した後、クロムDevTabに気づきました30メガバイトのSTH）

Answer 1

優れたライブラリがありますが、それが簡単に怠惰な負荷のようにあなたのイメージをロードするために作成することができます助けるが、簡単な方法でできるLozad.jsと呼ばれる。

あなたはGitHubのからそれをhereをダウンロードすることができます。

デモページhere

説明：
このライブラリは、クラス名により各画像アンカーにスクロールであなたの画像を1枚ずつをロードします。

例

HTML： - ：

<img class="lozad" data-src="image.png"> 

Javascriptを

ヘッダで >

<script src="https://cdn.jsdelivr.net/npm/lozad"></script> 

Image要素は、次のようになります必要があります10

お手伝いします。
ベスト、
イド。