0

我的页面中显示了许多图像，这些图像一个接一个。当我们运行页面时，我可以看到 4 或 5 张图像，当向下滚动时，接下来的几张图像变得可见。我在特定 div 内的图像集合中进行迭代，并通过 jquery 像这样向特定 div 中的这些图像添加一些属性

 $(".diagnostic_picture img").each(function () {
                var img = $(this);
                img.attr("class", "lazy");
                img.attr("data-original", img.attr("src"));
                img.attr("src", "images/grey.gif");
 });

现在我想将这些新属性添加到那些第一次加载页面时不可见的图像。

所以我试图检测图像是否在视口中......如果没有，那么我会添加这些新属性。这是代码

 $(".diagnostic_picture img").each(function () {
            if ($(this).offset().top > $(window).scrollTop() && $(this).offset().top < $(window).scrollTop() + $(window).height()) {
                var img = $(this);
                img.attr("class", "lazy");
                img.attr("data-original", img.attr("src"));
                img.attr("src", "images/grey.gif");
            }
        });

但它不起作用....类、原始数据等新属性被添加到我不想要的所有图像中。所以我的要求是我会在我的页面中为那些最初不在视口中的图像添加一些属性，直到有人向下滚动。所以我需要在我的代码中进行更改。

我已经通过这种方式解决了这个问题

$(".diagnostic_picture img").each(function () {
                var img = $(this);
                var pageHeight = $(window).scrollTop() + $(window).height();
                if (img.offset().top > pageHeight) 
                {
                    img.attr("class", "lazy");
                    img.attr("data-original", img.attr("src"));
                    img.attr("src", "images/grey.gif");
                }
 });

这样我检查图像是否在视口中

var img = $(this);
var pageHeight = $(window).scrollTop() + $(window).height();
if (img.offset().top > pageHeight) 
{
    // if images are in viewport then i will do something
}

无论如何，感谢您查看我的问题。

4

1 回答 1

0

If you want to show only the first 4 images in diagnostic_picture, you could select only those by:

$(".diagnostic_picture img:lt(5)")
于 2012-06-18T11:25:17.937 回答