Introduction

One of the must annoying thing when working with large data is how to loading this data to your page?

The common solution is paging but paging itself will not help too much you can end with hundred or thousands of page numbers.So new solution now is on the surface and it's called "Infinite Scroll".Infinite Scroll allow you to load chunk of data when you scroll down of the page and inject it inside the page, it will load data each time you scrolling down on the page.

Demo

Description

As I told you in the introduction Infinite Scroll is becoming more and more populer it's in evreywhere starting with Bing,Google,Facebook,Twitter,Linkedin.etc.

The idea of infinite scrolling is so simple and it can be summarized in the following diagram which is part of Scott Hanselmen Article

Infinite Scroll WebSites via AutoPagerize - Hacky, but the beginning of something cool


My Sample will show you how to Display a list of images like Bing and Google but this is not the only thing,you can take the advantage of idea behind infinite scrolling and implement the same concept everywhere.

The following code snippet will be called when you scroll to the last of the page

C# Part

JavaScriptVisual BasicC#
Edit|Remove
        $(document).ready(function () { 
            var Skip = 49//Number of skipped row 
            var Take = 14// 
            function Load(Skip, Take) { 
                $('#divPostsLoader').html('<img src="ProgressBar/ajax-loader.gif">'); 
 
                //send a query to server side to present new content 
                $.ajax({ 
                    type: "POST", 
                    url: "Grid.aspx/LoadImages", 
                    data: "{ Skip:" + Skip + ", Take:" + Take + " }", 
                    contentType: "application/json; charset=utf-8", 
                    dataType: "json", 
                    success: function (data) { 
 
                        if (data != ""{ 
                            $('.thumb').append(data.d); 
                        } 
                        $('#divPostsLoader').empty(); 
                    } 
 
                }) 
            }; 
            //Larger thumbnail preview  
 
            //When scroll down, the scroller is at the bottom and fire the Load ()function 
            $(window).scroll(function () { 
 
                if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
                    Load(Skip, Take); 
 
                   //Any number you want 
                    Skip = Skip + 14; 
                } 
            }); 
        });

Source Code Files

More Information

you can ask me here In Q & A section