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
    }
});

Answer 2

You can try something like this..

var processScroll = true;
$(window).scroll(function() {
    if (processScroll  && $(window).scrollTop() > $(document).height() - $(window).height() - 100) {
        processScroll = false;
        // your functionality here
        processScroll = true;
    }
});

Answer 3

You can make Ajax call to fetch more posts on 'onscroll' event of element (possibly on body in your case). You can make the same call using jquery's '.scroll()' documented here: http://api.jquery.com/scroll/

You can probably maintain a previous-top statement to determine direction of current scroll.