Jquery 如何防止向浏览器可见区域中的图像添加新属性

我有许多图片显示在我的网页，这是一个接一个。当我们运行页面时，我可以同时看到4或5个图像，当向下滚动时，接下来的几个图像将可见。我在特定div内的images集合中进行迭代，并通过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");
            }
        });

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

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个图像，您可以通过以下方式仅选择这些图像：

$(".diagnostic_picture img:lt(5)")

要将属性应用到多少图像？我确信我可以更改您的选择器以实现此目的。您是否同时运行上述两个选择器？。。。如果是这样的话，当然您将拥有所有具有该属性的图像。。第一个“每个”用于所有图像。没有if条件。你试过调试它吗？你看到if条件起作用了吗？它实际上阻止了一些元素？我的要求是，在向下滚动页面之前，我将为那些最初不在视口中的图像添加属性。我解决了我的问题…请看一看。谢天谢地，我的要求是，在向下滚动页面之前，我将为最初不在视口中的图像添加属性。
：lt
表示小于。在所有图像中，它将选择阵列中小于5的图像。
$(".diagnostic_picture img:lt(5)")