Question

I am working on stream like FB, in which users can post status/images etc

I want to show preloader image like in FB they show when we scroll down to our home page(at downside) and automatically show next posts then preloader image then posts and so on.

For now I am showing 20 posts by default and View button for showing next posts,

Below is my HTML structure

<div class="item Row mydiv StreamHide StreamBox">
//Posts 
//posts
</div>

and this is how i am hiding some posts

   $('.mydiv').each(function (index) {
                if (index <= 20) {
                    $(this).removeClass('StreamHide');
                    $(this).addClass('StreamShow');

                }
            });

How can i achieve the auto show functionality like FB

Answer 1

You could use the infinite scroll plugin to implement this functionality.

Here’s how you could configure it:

$('#content').infinitescroll({

    // selector for the paged navigation (it will be hidden)
    navSelector  : "div.navigation",

    // selector for the NEXT link (to page 2)
    nextSelector : "div.navigation a:first",

    // selector for all items you'll retrieve
    itemSelector : "#content div.post"          

});

You might also find the following article useful as it contains many examples of how you could use it the plugin.