how to use loader image for every image load

See more:

C#

ASP.NET

Javascript

JSON

how to use loader image for every image load while data is fetched using json and DataList. becouse the first row of my table is cloned and then data is fill into them while using json.

my code is:

javascript+json code on .aspx page:

<script type="text/javascript">    
        var pageIndex = 0;
        var pageCount;

        
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                GetRecords();
            }
        });

        $(function () {
            GetRecords();
        });

        function GetRecords() {
            pageIndex++;
            if (pageIndex == 1 || pageIndex <= pageCount) {
                $("#loader").show();
                $.ajax({
                    type: "POST",
                    url: "Latest-Products-in-greater-noida.aspx/GetImages",
                    data: '{pageIndex: ' + pageIndex + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            }
        }
        var i = 1;
        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
            var images = xml.find("Images");
            var repeatColumns = parseInt("<%=dlImages.RepeatColumns == 0 ? 1 : dlImages.RepeatColumns %>");
            var rowCount = Math.ceil(images.length / repeatColumns);
            var j = 0;

            images.each(function () {
                var image = $(this);
                var row = $("[id*=dlImages] .latestproducttbl:last").closest("tr");
                if ($(".is_used[value='1']", row).length == repeatColumns) {
                    row = $("[id*=dlImages] tr").eq(0).clone();
                    $(".is_used", row).val("0");
                    $(".loader", row).remove();
                    $("[id*=dlImages]").append(row);
                    j = 0;
                } else {
                    row = $("[id*=dlImages] .latestproducttbl:last").closest("tr");
                }
                var cell = $(".latestproducttbl", row).eq(j);
                $(".discount", cell).html(image.find("Discount").text() + '%');

                var commandArguid = image.find("Product_Id").text();
                var commandArguname = image.find("Product_Name").text();
                commandArguname = string_to_slug(commandArguname);

                var commandArgu = "products/" + commandArguname + "/" + commandArguid;


                $(".reduce", cell).html(image.find("Print_Price").text());
                $(".lnkpname", cell).html(image.find("Product_Name").text());
                $(".lnkdtl", cell).html(image.find("Selling_Price").text());
                $(".pimg", cell).attr("src", "Admin/ProductImage/" + image.find("Image_Name").text());
                
                $(".reduce", cell).attr("href", commandArgu);
                $(".lnkpname", cell).attr("href", commandArgu);
                $(".lnkdtl", cell).attr("href", commandArgu);
                $(".imganchr", cell).attr("href", commandArgu);
                $(".shopnow", cell).attr("href", commandArgu);

                
                $(".is_used", cell).attr("value", "1");
                var img = $(".image", cell);
                var loader = $("<img class = 'loader' src = 'loader.gif' />");
                img.after(loader);
                img.hide();
                img.attr("src", image.find("Url").text());
                img.load(function () {
                    $(this).parent().find(".loader").remove();
                    $(this).fadeIn();
                });
                j++;
                i++;
            });
            $("[id*=dlImages] .is_used[value='0']").closest(".latestproducttbl").remove();
        }
                

        function string_to_slug(str) {
            str = str.replace(/^\s+|\s+$/g, ''); // trim
            str = str.toLowerCase();

            // remove accents, swap ñ for n, etc
            var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
            var to = "aaaaeeeeiiiioooouuuunc------";
            for (var i = 0, l = from.length; i < l; i++) {
                str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
            }

            str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
    .replace(/\s+/g, '-') // collapse whitespace and replace by -
    .replace(/-+/g, '-'); // collapse dashes

            return str;
        }

       </script>

datalist on aspx page:

<asp:DataList ID="dlImages" BorderColor="black" CellPadding="7" CellSpacing="0" OnItemCommand="ItemsList_ItemCommand"
            RepeatDirection="Horizontal" RepeatLayout="Table" RepeatColumns="5" BorderWidth="0"
            runat="server">
            <ItemTemplate>
                <div class="latestproduct" style="margin-removed 32px; margin-removed 20px;">
                    <table class="latestproducttbl" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td style="height: 44px;">
                                <div class="discountcat">
                                    <table cellpadding="0" cellspacing="0" class="discountcattbl">
                                        <tr>
                                            <td style="font-size: 14px; color: White; padding-removed 8px;">
                                                <span class="discount">
                                                    <%#DataBinder.Eval(Container.DataItem, "Discount")%>
                                                    %</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="color: White;">
                                                off
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="height: 150px;">
                                <div class="proimage">
                                <a class="imganchr">
                                    <img class="pimg" src='<%#DataBinder.Eval(Container.DataItem,"Image_Name", "~/Admin/ProductImage/{0}") %>' width="140px" height="150px" />
                                    </a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; height: 40px; font-size: 14px; padding: 0px 7px 0px 7px;
                                vertical-align: top; color: #0875a3;">
                                <a class="lnkpname"><%#DataBinder.Eval(Container.DataItem, "Product_Name")%></a>
                            </td>
                        </tr>
                        <tr>
                            <td class="tblprice">
                                <span class="reduce1">Rs.
                                    <a class="reduce"> <%#DataBinder.Eval(Container.DataItem, "Print_Price")%></a></span>   
                                Rs.
                                    <a class="lnkdtl" style="color:#CD0000;"><%#DataBinder.Eval(Container.DataItem, "Selling_Price")%></a>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: center; height: 50px;">
                                <a class="shopnow">Shop Now</a>
                                <input type="hidden" class="is_used" value="0" />
                            </td>
                        </tr>
                    </table>
                </div>
            </ItemTemplate>
        </asp:DataList>

c# page:

private void BindDummyItem()
   {
       DataTable dummy = new DataTable();
       dummy.Columns.Add("Product_Id");
       dummy.Columns.Add("Product_Name");
       dummy.Columns.Add("Image_Name");
       dummy.Columns.Add("Discount");
       dummy.Columns.Add("Print_Price");
       dummy.Columns.Add("Selling_Price");
       int count = dlImages.RepeatColumns == 0 ? 1 : dlImages.RepeatColumns;
       for (int i = 0; i < count; i++)
       {
           dummy.Rows.Add();
       }
       dlImages.DataSource = dummy;
       dlImages.DataBind();
   }



   [WebMethod]
   public static string GetImages(int pageIndex)
   {
       return GetImagesData(pageIndex).GetXml();
   }

   public static DataSet GetImagesData(int pageIndex)
   {
       //int pageSize = 5;
       //string query = "[GetLatestProdPageWise]";
       //SqlCommand cmd = new SqlCommand(query);
       //cmd.CommandType = CommandType.StoredProcedure;
       //cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
       //cmd.Parameters.AddWithValue("@PageSize", pageSize);
       //cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
       //return GetData(cmd);

       string constring = ConfigurationManager.ConnectionStrings["Grocery"].ConnectionString;
       using (SqlConnection con = new SqlConnection(constring))
       {
           using (SqlCommand cmd = new SqlCommand("[GetLatestProdPageWise]"))
           {
               int pageSize = 10;
               cmd.CommandType = CommandType.StoredProcedure;
               cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
               cmd.Parameters.AddWithValue("@PageSize", pageSize);
               cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;

               using (SqlDataAdapter sda = new SqlDataAdapter())
               {
                   cmd.Connection = con;
                   sda.SelectCommand = cmd;
                   using (DataSet ds = new DataSet())
                   {
                       sda.Fill(ds, "Images");
                       DataTable dt = new DataTable("PageCount");
                       dt.Columns.Add("PageCount");
                       dt.Rows.Add();
                       dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value;
                       ds.Tables.Add(dt);
                       return ds;
                   }
               }
           }
       }
   }

please give any suggestion

thanks in advance