Datalist and image load using jquery lazyload plugin issue
<p>i have one datalist and with in item template i have one image tag. i bind the datalist from server side code.</p>

<h2>here is my small code</h2>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head runat="server"&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src="Scripts/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="Scripts/jquery.lazyload.min.js" type="text/javascript"&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form id="form1" runat="server"&gt;
&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $("table[id*=dgImages] img").lazyload({
          placeholder: "images/ajax-loader.gif",
          effect: "fadeIn" 
      });
  });
&lt;/script&gt; 

&lt;asp:DataList ID="dgImages" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" RepeatLayout="Table"&gt;
      &lt;ItemTemplate&gt;
       &lt;img src='&lt;%# Eval("photos")%&gt;' width="100px" height="100px" /&gt;
    &lt;/ItemTemplate&gt;
&lt;/asp:DataList&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>the problem is when i am running this sample then all the images downloading at a time which i dont want.
i want only images in browser visible area should download and when scroll down then other visible images should 
download.</p>

<p>i just could not figure out why lazyload is not working in my sample.
so please help me to point out the actual problem and how to fix it</p>

<h2>is this code is ok</h2>

<pre><code>$(document).ready(function () {
      $("table[id*=dgImages] img").lazyload({
          placeholder: "images/ajax-loader.gif",
          effect: "fadeIn" 
      });
  });
</code></pre>

<p>please help me with rectified code. thanks</p>
