現在、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"
});