Load on demand data in GridView with Images on scroll using ASP.Net and jQuery AJAX

Here I have created sample that will hellp you out.

HTML

<div>
    <div id="dvGrid" style="height: 250px; overflow: auto; width: 517px">
        <table class="Grid" cellspacing="0" rules="all" border="1" id="Table1" style="width: 500px;
            border-collapse: collapse;">
            <tr>
                <th scope="col" style="width: 100px">
                    Id
                </th>
                <th scope="col" style="width: 200px">
                    Name
                </th>
                <th scope="col" style="width: 200px">
                    Image
                </th>
            </tr>
        </table>
        <asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false" Width="500px">
            <Columns>
                <asp:TemplateField HeaderText="Id" ItemStyle-Width="100" HeaderStyle-Width="100">
                    <ItemTemplate>
                        <asp:Label ID="lblId" Text='<%#Eval("Id") %>' runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Name" ItemStyle-Width="200" HeaderStyle-Width="200">
                    <ItemTemplate>
                        <asp:Label ID="lblName" Text='<%#Eval("Name") %>' runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Image" ItemStyle-Width="200" HeaderStyle-Width="200">
                    <ItemTemplate>
                        <asp:Image ID="img1" ImageUrl='<%#Eval("Url") %>' runat="server" Style="height: 100px;
                            width: 100px" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </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 = 1;
        var pageCount;
        $(function () {
            $("[id$=gvImages] tr").eq(0).remove();
        });
            
        $("#dvGrid").on("scroll", function (e) {
            var $o = $(e.currentTarget);
            if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
                GetRecords();
            }
        });

        function GetRecords() {
            pageIndex++;
            if (pageIndex == 2 || pageIndex <= pageCount) {
                if ($("[id$=gvImages] .loader").length == 0) {
                    var row = $("[id$=gvImages] tr").eq(0).clone(true);
                    row.addClass("loader");
                    row.children().remove();
                    row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" src="103.gif"  /></td>');
                    $("[id$=gvImages]").append(row);
                }
                $.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.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            }
        }

        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
            var customers = xml.find("Images");
            $("[id$=gvImages] .loader").remove();
            customers.each(function () {
                var customer = $(this);
                var row = $("[id$=gvImages] tr").eq(0).clone(true);
                $(row).find('[id*=lblId]').html(customer.find("Id").text());
                $(row).find('[id*=lblName]').html(customer.find("Name").text());
                $(row).find('[id*=img1]').attr('src', customer.find("Url").text());
                $("[id$=gvImages]").append(row);
            });
            $("#loader").hide();
        }
    </script>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        gvImages.DataSource = GetImagesPageWise(1, 10);
        gvImages.DataBind();
    }
}

public static DataSet GetImagesPageWise(int pageIndex, int pageSize)
{
    string constring = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constring))
    {
        using (SqlCommand cmd = new SqlCommand("[GetImagesPageWise]"))
        {
            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;
                }
            }
        }
    }
}

[WebMethod]
public static string GetImages(int pageIndex)
{
    //Added to similate delay so that we see the loader working
    //Must be removed when moving to production
    System.Threading.Thread.Sleep(2000);

    return GetImagesPageWise(pageIndex, 10).GetXml();
}

SQL

REATE PROCEDURE [GetImagesPageWise]
    @PageIndex INT = 1
   ,@PageSize INT = 3
   ,@PageCount INT OUTPUT
AS
BEGIN
	SET NOCOUNT ON;
 
	SELECT ROW_NUMBER() OVER
		   (
		   	  ORDER BY [Id] ASC
		   )AS RowNumber
		   ,Id
		   ,Name
		   ,Url
	INTO #Results
	FROM [Images]
 
	DECLARE @RecordCount INT
	SELECT @RecordCount = COUNT(*) FROM #Results
 
	SET @PageCount = CEILING(CAST(@RecordCount AS DECIMAL(10, 2)) / CAST(@PageSize AS DECIMAL(10, 2)))
          
	SELECT * FROM #Results
	WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1
    
	DROP TABLE #Results
END

Screenshot