Show loading GIF for large images until they load in GridView using jQuery in ASP.Net

Download the Plugin from here http://jquery.eisbehr.de/lazy/index.php

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.lazy.1.6.min.js" type="text/javascript"></script>
<script type = "text/javascript">
    $(function () {
        $("[id*=GridView1] img").lazy();
    });
</script>
<asp:GridView ID = "GridView1" runat="server" AutoGenerateColumns = "false">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:Image runat = "server" data-src = '<%# Eval("ImageUrl") %>' src = "loading.gif" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Code

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[1] { 
                        new DataColumn("ImageUrl", typeof(string))});
    dt.Rows.Add("JellyFish.jpg");
    dt.Rows.Add("Koala.jpg");
    dt.Rows.Add("Penguins.jpg");
    dt.Rows.Add("Tulips.jpg");
    GridView1.DataSource = dt;
    GridView1.DataBind();
}