jQuery选择图像上方的图像

Question

我目前使用jQuery lazyload插件来加载图像。我正在使用JavaScript来替换src和数据原始属性。这会导致负载轻微闪烁。我想知道是否有一种方式与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" 
}); 

编辑：@Jason Sperske伟大的答案。这是我与解决问题闪烁代码：

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

Answer 1

虽然在选择没有内置此目的，你可以在它们之间迭代，并查找比窗口的高度更高的位置值。 Ben Pickles（his SO profile）已经实现了这个过滤器，名为onScreen，您可以像使用选择器一样使用它（请注意，它仍然会获取所有元素，但在尝试修改它们之前先对列表进行配对，所以选择器将不会是任何更快（实际上稍慢），但减少的元素集将更快更新）。