i was working with datalist and datalits will show many images in page. so i use jquery lazyload plugin but it is not working rather throwing error which i just do not understand.

here is my code

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



</head>
 <body>
 <form id="form1" runat="server">
  <script type="text/javascript">
  $(function () {
      $("img").lazyload({ placeholder: "images/ajax-loader.gif", effect: "fadeIn" });
  });
  </script> 

<asp:DataList ID="dgImages" runat="server" RepeatColumns="4" 
    RepeatDirection="Horizontal" RepeatLayout="Flow">
    <ItemTemplate>
       <asp:image  runat="server"  src='<%# Eval("photos")%>' alt="IIS 7 settings" title="" /> 

    </ItemTemplate>
</asp:DataList>


</form>

</body>
</html>

protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("photos", Type.GetType("System.String")));
        DataRow row;

        string[] aryPhotos;
        string strPath = @"c:\users\tridip\documents\visual studio 2010\Projects \LazyLoad\LazyLoad\images\snapdeals";
        aryPhotos = Directory.GetFiles(strPath, "*.jpg");

        foreach (string strPhoto in aryPhotos)
        {
            row = dt.NewRow();
            string strImg = "images/snapdeals/" + Path.GetFileName(strPhoto);
            row["photos"] = strImg;
            dt.Rows.Add(row);
        }
        }

this is my sample html output after binding datalist

<span id="dgImages"><span>
       <img alt="IIS 7 settings" title="" src="images/snapdeals/06531A_PINK_M_1_2x.jpg" src="" /> 

    </span><span>
       <img alt="IIS 7 settings" title="" src="images/snapdeals/06532A_pink_M_1_2x.jpg" src="" /> 

    </span><span>
       <img alt="IIS 7 settings" title="" src="images/snapdeals/06633A_BLUE_M_1_2x.jpg" src="" /> 

    </span><span>

       <img alt="IIS 7 settings" title="" src="images/snapdeals/06641A_CHERRY_M_1_2x.jpg" src="" /> 

    </span><br /><span>
       <img alt="IIS 7 settings" title="" src="images/snapdeals/06641A_pink_M_1_2x.jpg" src="" /> 

    </span><span>
       <img alt="IIS 7 settings" title="" src="images/snapdeals/06641A_WHITE_M_1_2x.jpg" src="" /> 

    </span><span>
       <img alt="IIS 7 settings" title="" src="images/snapdeals/08334A_BLACK_M_1_2x.jpg" src="" /> 

    </span><span>

i just do not understand how a empty src tag added. please guide me what is wrong in my code.

thanks

1 Answers

0
wooer On Best Solutions

In the project site it says "Real image url should be stored data-original attribute." And src is used as the placeholder image. <img data-original="img/example.jpg" src="img/grey.gif"> is the usage says the site.