应用错误收集

使用jquery lazyload插件问题进行Datalist和图像加载

时间：2011-12-20 06:35:23

标签： jquery asp.net

我有一个数据列表，在项目模板中我有一个图像标记。我从服务器端代码绑定datalist。

这是我的小代码

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

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

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

问题是当我运行这个样本然后所有的图像下载我不想要的时间。我只想下载浏览器可见区域中的图像，当向下滚动时，其他可见图像应该下载下载。

我无法弄清楚为什么lazyload在我的样本中不起作用。所以请帮我指出实际问题以及如何解决它

这段代码是好的

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

请帮我修改一下代码。感谢

1 个答案:

答案 0 :(得分：0)

你为什么不试试

  $("#dgImages img").lazyload({
          placeholder: "images/ajax-loader.gif",
          effect: "fadeIn" 
      });