jQuery选择图像上方的图像 [英] jQuery select images above the fold

问题描述

我目前正在使用jQuery lazyload插件来加载图片。我使用javascript来替换src和data-original属性。这会导致负载轻微闪烁。我想知道是否有一种方法可以让jquery只选择折叠下方或折叠以上的图像，这样我就可以避免这种闪烁。

I am currently using the jQuery lazyload plugin to load images. I am using javascript to replace the src and data-original attributes. This causes a slight flicker on load. I am wondering if there is a way with jquery to select only the images below the fold or above the fold so that I can avoid this flicker.

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很棒的答案。这是我解决了闪烁问题的代码：

@Jason Sperske great answer. This is the code that I have resolved the flickering issue with:

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

推荐答案

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

While there is no built in selector for this purpose you could iterate over them and look for position values that are greater than the window height. Ben Pickles (his SO profile) has implemented this into a filter called onScreen which you can use like a selector (note that it will still fetch all elements, but then pair down the list before you attempt to modify them, so the selector won't be any faster (actually slightly slower), but the reduced set of elements will be faster to update).

这篇关于jQuery选择图像上方的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！