On demand image load using jquery
<p>suppose i have div and div has many images like</p>

<pre><code>&lt;div id="main"&gt;
&lt;img src="~/images/img_1.png"&gt;
&lt;img src="~/images/img_2.png"&gt;
&lt;img src="~/images/img_3.png"&gt;
&lt;img src="~/images/img_4.png"&gt;
&lt;img src="~/images/img_5.png"&gt;
&lt;img src="~/images/img_6.png"&gt;
&lt;/div&gt;


$('DIV.example').each(function() {
if(this.complete) {
//remove spinner and show actual image
}
});
</code></pre>

<p>when all the above images in particular div will be loading then i want to show spinner busy image and which will has completely downloaded in client then i want to show actual image instead of spinner.</p>

<p>i want code in such way to detect which image has completely download and then replace the spinner image url with actual image for a particular div not for all images in my pages.</p>

<p>thanks</p>

<hr>

<p>does it works....someone suggest me this code.</p>

<pre><code>&lt;div id="main"&gt;
&lt;img src="~/images/busy.png" data-src='"~/images/img_1.png"'&gt;
&lt;img src="~/images/busy.png" data-src='"~/images/img_2.png"'&gt;
&lt;img src="~/images/busy.png" data-src='"~/images/img_3.png"'&gt;
&lt;img src="~/images/busy.png" data-src='"~/images/img_4.png"'&gt;
&lt;img src="~/images/busy.png" data-src='"~/images/img_5.png"'&gt;
&lt;/div&gt;

$('#main img').each(function() {
   $(this).attr('src',$(this).attr('data-src'));
}).removeAttr('data-src');
</code></pre>

<p>how to determine here data-src image file has been downloaded or not? plzz guide. thanks</p>

<pre><code>thisTab.find('img[data-src]').each(function() {
$(this).attr('src', $(this).attr('data-src'))
       .removeAttr('data-src');
</code></pre>

<p>});</p>
