title: jQuery select images above the fold
body: <p>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. </p>
  
  <pre><code>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"
  });
  </code></pre>
  
  <p>Edit: @Jason Sperske great answer. This is the code that I have resolved the flickering issue with:</p>
  
  <pre><code>var wH = $(window).height();
  var $imgs = $("img:not(.nolazy)");
  $imgs.each( function(){
      var imgPosition = $(this).offset();
      if(imgPosition.top &gt; wH){
          var imgSrc = $(this).attr("src");
          $(this).attr("data-original",imgSrc).attr("src","gray.gif");
      }
  });
  $imgs.lazyload({
        effect : "fadeIn"
  });
  </code></pre>