facebook like auto content uploading | infinite scrolling | load data on page scroll | Lazy loading

wondered how to create facebook like automatic content upload when you reach the bottom of the page? we may call this as lazy loading or infinity scrolling.
All you need to do is,

whenever a scroll event is fired, check if we have reached the bottom of the page, and if we are at the bottom, call our ajax function to load the content.

    if ($(window).scrollTop() + $(window).height() == $(document).height())
         { // Reached page bottom. make an ajax call
                    url: 'test.html', //targeted URL 
                    method: 'get',
                    success: function(data){
		    $(".wrapRows").append(data); //append the response

.scroll() is fired every time the user scrolls the page.
$(window).scrollTop() returns the number of pixels hidden ‘above’ when the page is scrolled.
$(window).height() gives the height of the window. Same as window.innerHeight
$(document).height() gives the total height of the page.


I Am suresh(suresh kumar )a Web developer,Freelancer,webdesigner,UI developer from bangalore. Got 6+ yrs of IT experience . I specialize in standards-based XHTML, CSS and JavaScript web development. Each site I develop is built to be search engine friendly (SEO), using the latest development principles and techniques.

You may also like...

1 Response

  1. Hi! This is my first visit to your blog! We are a collection of volunteers and starting a new initiative in a community in the same niche. Your blog provided us useful information to work on. You have done a marvellous job!

Leave a Reply

Your email address will not be published. Required fields are marked *