Question

我正在搜索Google，发现了一些为gridviews实现jQuery延迟加载插件的代码，但我很困惑它是如何工作的。

这是标记：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script src="http://www.appelsiini.net/projects/lazyload/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
  $(function() {
    $("table[id*=GridView1] img").lazyload({
          placeholder: "http://www.gallery2c.com/admin/Upload/ThumbNail/customers%20own%20image.jpg",
          event: "sporty"
      });
  });
  $(window).bind('load', function() {
      var timeout = setTimeout(function() { $("img").trigger("sporty") }, 5000);
  });      
 </script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" class="tablesorter">
    <Columns>
        <asp:TemplateField HeaderText="ImageID">
            <ItemTemplate>
                <%#Eval("ImageID")%>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Image">
            <ItemTemplate>
                <img  src='<%#Eval("Thumb")%>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
</form>
</body>
</html>

这是服务器端代码：

protected void Page_Load(object sender, EventArgs e)
{
    var imageDataSource = (new[] { new { ImageID = 0, URL = "http://www.gallery2c.com/admin/Upload/FullImage/moda01.jpg", 
                                Thumb = "http://www.gallery2c.com/admin/Upload/ThumbNail/moda01.jpg" } }).ToList();
    for (int i = 1; i < 10; i++)
    {
        imageDataSource.Add(new
        {
            ImageID = 0,
            URL = "http://www.gallery2c.com/admin/Upload/FullImage/moda0" + i.ToString() + ".jpg",
            Thumb = "http://www.gallery2c.com/admin/Upload/ThumbNail/moda0" + i.ToString() + ".jpg"
        });
    }
    GridView1.DataSource = imageDataSource;
    GridView1.DataBind();
}

阅读此代码后，我了解到，当页面加载时，gridview是服务器端代码中绑定的数据。当客户端onload事件被触发时，'运动'事件被设置为每5秒重复调用一次。为什么每隔5秒就要调用一次“运动”事件？

Answer 1

示例中的setTimeout函数将等待5秒钟，然后引发运动事件。然而，它不会每5秒提高一次。有关详细信息，请参阅setTimeout documentation。该链接还提到了无限循环的实现方式。

在您的代码示例中，gridview将在页面呈现的5秒内呈现在页面上。

jQuery lazyload plugin用于在稍后的时刻呈现html（即，当浏览器呈现页面的其余部分时）。这样，只有在用户向下滚动时，才能加载位于页面底部的图像。如果用户不向下滚动，则不会呈现它们，从而加快了页面的加载时间。您还可以让插件在引发某些事件时加载图像。这些事件可以是单击按钮，但在javascript中，您可以根据需要定义事件。所以你可以定义一个'运动'活动，也可以定义'foobar'，'something'，...事件。

最后，lazyload插件不仅限于图像。因此，您还可以使用gridviews（以表格形式呈现）。

所以，回答你的问题：

运动事件只提出一次，并且在页面加载完成后5秒
lazyload插件将在引发运动事件时呈现gridview
因此，5秒后网格视图将变为可见

更新

lazyload插件适用于图像，但作为一个优秀的jQuery插件，可以与其他元素一起使用。对于图像，它强制浏览器不加载图像，直到用户可以看到图像（即向下滚动），或者直到某个事件被引发。对于其他元素，lazyload插件并没有多大意义。

如果你想延迟一个包含数据的表，你将不得不自己设置它。一种可能的解决方案是使用jQuery对服务器进行AJAX调用并请求数据。然后将数据放入表中。您可以使用您在问题中提到的setTimeout函数将此AJAX调用作为延迟调用。

需要对jquery延迟加载和gridview的代码进行位解释

1 个答案:

更新