3

我目前正在使用 jQuery lazyload 插件来加载图像。我正在使用 javascript 替换 src 和 data-original 属性。这会导致负载轻微闪烁。我想知道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"
});
4

1 回答 1

2

虽然没有用于此目的的内置选择器，但您可以遍历它们并查找大于窗口高度的位置值。 Ben Pickles（他的 SO 个人资料）已将此实现到一个名为onScreen的过滤器中，您可以像选择器一样使用它（请注意，它仍会获取所有元素，但在您尝试修改它们之前将列表配对，因此选择器不会t 更快（实际上稍微慢一点），但减少的元素集更新速度会更快）。

于 2012-09-18T21:25:50.033 回答