Question

我目前正在使用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"
});

Answer 1

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

jQuery选择图像上方的图像

1 个答案: