How to determine that only visible images downloaded complete and render in page
<p>here is code by which i can implement image lazyload functionality. i need to know when only visible images downloaded complete and render in page. how it will be possible.</p>

<h2>here is my code</h2>

<pre><code>$(document).ready(function () {
$("table[id*=dgImages] img").each(function () {
if($(this).offset().top &gt; $(window).scrollTop() &amp;&amp; $(this).offset().top &lt;    $(window).scrollTop() + $(window).height()) {

  // callback on load complete          
  this.onload = function() { 
    alert('this image download complete'); 
    $(this).fadeIn('slow');
  }

  $(this).attr("src", $(this).attr("original"));
  $(this).removeAttr("original");
}
});
});
</code></pre>

<p>with the help of the below code i can make sure when each image download complete at client side.</p>

<pre><code>this.onload = function() { 
    alert('this image download complete'); 
    $(this).fadeIn('slow');
  }
</code></pre>

<p>so i need another callback mechanism which fire and notify me that only visible images downloaded complete and render in page. please discuss this issue how to achieve it. thanks</p>
