How to prevent to add new attributes to images those which are in browser visible area
<p>i have many images showing in my page which comes one after one. when we run page then 4 or 5 images i can see at time and when scroll down then next few images gets visible. i iterate in images collection inside a specific div and add some attribute to those images in a specific div by jquery like this way</p>

<pre><code> $(".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");
 });
</code></pre>

<p>now i want to add these new attribute to those images which are not invisible when page load first time.</p>

<p>so i trying to detect images are in viewport or not....if not then i would add these new attribute.
here is code</p>

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

<p>but it is not working....the new attribute like class,data-original etc are getting added to all images which i do not want. so my requirement is that i would add some attribute to those images in my page which are not in view port initially until anyone scroll down. so what i need to change in my code.</p>

<h2>I have solved the issue this way</h2>

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

<p>This way i checked the images are in viewport or not</p>

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

<p>anyway thanks for having look at my question.</p>
