Load DataList with Images on Scrolling down in ASP.Net using jQuery

Here I have created sample that will help you out.

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <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: "CS.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);
                    }
                });
            }
        }
        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] .item:last").closest("tr");
                if ($(".is_used[value='1']", row).length == repeatColumns) {
                    row = $("[id*=dlImages] tr").eq(0).clone();
                    $(".is_used", row).val("0");
                    $(".image", row).attr("src", "");
                    $(".button", row).attr("href", "");
                    $(".loader", row).remove();
                    $("[id*=dlImages]").append(row);
                    j = 0;
                } else {
                    row = $("[id*=dlImages] .item:last").closest("tr");
                }
                var cell = $(".item", row).eq(j);
                $(".name", cell).html(image.find("Name").text());
                $(".button", cell).attr("href", image.find("Url").text());
                $(".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++;
            });
            $("[id*=dlImages] .is_used[value='0']").closest(".item").remove();
        }
    </script>
    <asp:DataList ID="dlImages" runat="server" RepeatLayout="Table" RepeatColumns="3"
        CellPadding="2" CellSpacing="20">
        <ItemTemplate>
            <table class="item" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td align="center" class="header">
                        <asp:Label Text='<%# Eval("Name") %>' CssClass="name" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td align="center" class="body">
                        <asp:Image ImageUrl='<%# Eval("Url") %>' CssClass="image" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td class="footer" align="center">
                        <asp:HyperLink Text="View" NavigateUrl='<%# Eval("Url") %>' class="button" runat="server"
                            Target="_blank" />
                        <input type="hidden" class="is_used" value="0" />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindDummyItem();
    }
}

private void BindDummyItem()
{
    DataTable dummy = new DataTable();
    dummy.Columns.Add("Id");
    dummy.Columns.Add("Name");
    dummy.Columns.Add("Url");
    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 = 9;
    string query = "[GetImagesPageWise]";
    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);
}

private static DataSet GetData(SqlCommand cmd)
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        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;
            }
        }
    }
}

Screenshot