Home/ Questions/Q 6929297
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:17:56+00:00

I was searching Google and found some code that implements a jQuery lazy load

  • 0

I was searching Google and found some code that implements a jQuery lazy load plug-in for gridviews, but I’m confused how it works.

Here’s the markup:

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

And here’s the server-side code:

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

After reading this code I understand that when the page loads the gridview is data bound in the serverside code. When the client side onload event is fired, the ‘sporty’ event is setup to call repeatedly every 5 seconds. Why should the ‘sporty’ event be called every 5 seconds?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The setTimeout function in your example will wait 5 seconds and then raise the sporty event. It won’t raise it every 5 seconds however. See the setTimeout documentation for more info. The link also mentions how infinite loops are implemented.

    In you code example, the gridview would be rendered on the page 5 seconds the page was ready rendering.

    The jQuery lazyload plugin is for rendering html at a later moment in time (i.e. not when the browser is rendering the rest of the page). This way, you can load images that are at the bottom of your page only when the user scrolls down. If the user doesn’t scroll down, they will not be rendered, speeding up the load time of your page.
    You can also let the plugin load the images when certain events are raised. These events can be a click on a button, but in javascript you can define events as you please. So you can define a ‘sporty’ event, but also a ‘foobar’, ‘something’,… event.

    Finally, the lazyload plugin isn’t limited to images. So you can also work with gridviews (which render as tables).

    So, to answer your question:

    • the sporty event is only raised once, and 5 seconds after the page was finished loading
    • the lazyload plugin will render the gridview when the sporty event is raised
    • so, the gridview will become visible after 5 seconds

    Update

    The lazyload plugin is meant for images, but, as a good jQuery plugin, can work with other elements. For images, it forces the browser not to load the image until the user can see the image (i.e. by scrolling down), or until a certain event is raised. For other elements, the lazyload plugin doesn’t really make a lot of sense.

    If you want to lazyload a table with data, you’re going to have to set it up yourself. A possible solution could be to use jQuery to make an AJAX call to your server and request the data. Then put that data into your table. You could make this AJAX call a delayed call with the setTimeout function you mentioned in your question.

    • 0