Auto load content on scroll down

Question

I am creating a blog on django/webfaction. My hompage currently displays 4 posts by default (posts are limited to 4 on queryset in urls.py). Now I would like to load four more posts once user reaches the bottom of the page and keep on continuing that until last post is reached. How to achieve this?

Answer 1

If you want to load your content on reaching extreme bottom of document use following code:

$(window).scroll(function()
{
    if($(window).scrollTop() == $(document).height() - $(window).height())
    {
          // load your content
    }
});

If you want to load content before reaching 100 pixel of bottom use

var loading= false;
$(window).scroll(function() {
    if (!loading && ($(window).scrollTop() >  $(document).height() - $(window).height() - 100)) {
        loading= true;

        // your content loading call goes here.

        loading = false; // reset value of loading once content loaded
    }
});