jquery lazy load plugin不能与datalist asp.net一起使用

时间:2011-12-18 20:14:40

标签: jquery asp.net

我正在使用datalist,datalits将在页面中显示许多图像。所以我使用jquery lazyload插件,但它不起作用而是抛出错误,我只是不明白。

这是我的代码

<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);
        }
        }

这是绑定datalist后的示例html输出

<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>

我只是不明白如何添加空的src标签。 我的代码出了什么问题?

1 个答案:

答案 0 :(得分:0)

the project site中,它说“真实图片网址应该存储数据原始属性”。并且src用作占位符图像。 <img data-original="img/example.jpg" src="img/grey.gif">用法表示网站。