3

現在、jQuerylazyloadプラグインを使用して画像を読み込んでいます。src属性とdata-original属性を置き換えるためにjavascriptを使用しています。これにより、負荷時にわずかなちらつきが発生します。このちらつきを避けるために、jqueryを使用して、折り目の下または折り目の上の画像のみを選択する方法があるかどうか疑問に思っています。

var $imgs = $("img:not(.nolazy)");
$imgs.each( function(){
    var imgSrc = $(this).attr("src");
    $(this).attr("data-original",imgSrc).attr("src","gray.gif");
});
$imgs.lazyload({
      effect : "fadeIn"
});

編集：@JasonSperske素晴らしい答え。これは、ちらつきの問題を解決したコードです。

var wH = $(window).height();
var $imgs = $("img:not(.nolazy)");
$imgs.each( function(){
    var imgPosition = $(this).offset();
    if(imgPosition.top > wH){
        var imgSrc = $(this).attr("src");
        $(this).attr("data-original",imgSrc).attr("src","gray.gif");
    }
});
$imgs.lazyload({
      effect : "fadeIn"
});
4

1 に答える 1

2

この目的のための組み込みのセレクターはありませんが、それらを繰り返し処理して、ウィンドウの高さよりも大きい位置の値を探すことができます。 Ben Pickles（彼のSOプロファイル）はこれをonScreenと呼ばれるフィルターに実装しました。これはセレクターのように使用できます（すべての要素をフェッチしますが、変更を試みる前にリストをペアリングするため、セレクターはより速くなります（実際にはわずかに遅くなります）が、要素の削減されたセットは更新がより速くなります）。

于 2012-09-18T21:25:50.033 に答える