私はいつも.off（ 'load'）;

Question

画像がたくさんあるporfolioのウェブサイトでは、クライアントの読み込み時間を確認した後、小さな画像または大きな画像を表示します。しかし、より小さな画像セットを読み込んだ後は、より大きな画像のためにそれらを交換したいと思います。

私はこのために.on（ 'load'）ハンドラを使用しましたが、ページをテストするとき、私はそれが発砲し続けていることがわかりました。最後に.off（ 'load'）ハンドラを追加して修正しました。

$(this).on('load', function() { 
    $(this).attr('src', $(this).data('src')).off('load'); 
    console.log('full size img are loading'); 
}).attr('src', srcNew); 

だから私の質問は：すべてのコードスニペットで

オンライン、私は.off（「ロード」）ハンドラのこの使用を発見したことはありません。これは正常な動作ですか？

おそらく、関数がループ内にあることは重要ですか？ここでは、完全な機能は次のとおりです。

var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; 

$(document).ready(function() { 
    $.fn.lazyLoad = function(){ 
     if($(this).is('img[data-src]')) { 
      var lazy = $(this); 
     } else { 
      var lazy = $(this).find('img[data-src]'); 
     }; 
     $(lazy).each(function(){ 
      if (loadTime > 1000) { 
       var src = $(this).data('src'); 
       var srcPath = src.slice(0, -4); 
       var srcExt = src.slice(-4); 
       var srcNew = srcPath + '_s' + srcExt; 
       $(this).on('load', function() { 
        $(this).attr('src', $(this).data('src')).off('load'); 
        console.log('full size img have been loaded'); 
       }).attr('src', srcNew); 
       console.log('_s img have been loaded'); 
      } else { 
       $(this).attr('src', $(this).data('src')); 
      } 
     }); 
    }; 
    $('.lazy').lazyLoad(); 
    $('.slide').click(function() { 
     $(this).lazyLoad(); 
    }); 
}); 

そして、ここでHTML：

<img data-src="img/photo.jpg" src="img/photo_s.jpg" alt="" /> 

Answer 1

あなたの機能はloadイベントがトリガされ続けるので、呼び出され続けます。イメージのsrc属性を変更すると、ブラウザは新しいソースデータを読み込みます。完了したら、その要素の新しいloadイベントが、前と同じイベントリスナーを起動します。 関数の最後に.off()を使用して、1回だけ実行するようにしても構いません。 .one()を使用すると同じ動作が得られます。