Lazy load blog posts

Question

I have a list of blog posts and the number is reaching 25+ but it\'s all in the one page so I need to try and build a lazy loader.

I have tried various plugins but none

Answer 1

You are asking about Lazy Loading.

Well the answer must include a server side. Your question does not specify what type of server side language you are using. In my answer I will use some basic PHP code for mocking random blog posts.

lazy loading means that we only load what the user can see, and later load more data when needed.

loading data means - requesting it from a server. This usually involves AJAX but not necessarily. (although you probably can use AJAX ). JQuery has a wonderful ajax interface.

The biggest question is - what should trigger my next load - hence all the plugins.

I took Tgr's advice and implemented a lazy load with waypoints. I even used waypoint tutorial for lazy loading as Tgr suggested (give Tgr more points please).

You can see my implementation at my site

What I made was mock blog posts with changing title. Each time the user scrolls down enough, I get more posts from the server.

I added a download link for my source so you can download and start playing with it. just run main.html and you're good to go.

The file more_posts.php generates a lorem ipsum post with a random title. ( I needed some fake content to have a scroll on the page ).

It looks like this

 This is post number  


Lorem ipsum dolor .... Quisque ut pretium nibh.



Lorem ipsum dolor .... Quisque ut pretium nibh.

As you can see the only PHP code I have is to add something random to the title.

This should look familiar to you since you already have 25+ posts in your blog.

The real logic lies in main.html - the HTML part looks like so

    

    

        

            

                
                
Next Page
            
        
    

The idea is you have section which contains the first few posts - and gives you some scrolling on the page. At bottom you have a more link within a footer, that when JavaScript is disabled should act as a regular "next" link.

Waypoint uses this link to trigger the next load. Whenever the link is about to show on screen we will use ajax to get the next post automatically.

So the JavaScript part looks like so :

$(document).ready(function() {

    function loadMorePosts( callback ){
        $.get($('.more a').attr('href'), function(data) { 
                $('#container').append($(data)); 
                if ( typeof(callback) == "function" ){ callback(); }
        })
    }
    loadMorePosts();

    var $footer = $('footer');
    var opts = {
        offset: '100%'
    };

    $footer.waypoint(function(event, direction) {
                        $footer.waypoint('remove');
                        loadMorePosts( function(){ $footer.waypoint(opts);} );


            }, opts);
});

the function loadMorePosts invokes the method $.get which is a simpler syntax for $.ajax({type:'GET' .. }). It uses the same URL as the link's href attribute has. In my example the href attribute points to "more_posts.php".

When my demo loads, the content is completely empty, so I go ahead and fetch the first post I want to show. Then I tell waypoint to listen on the footer - and whenever the footer is close by, I go and get more posts.

There's a tricky part where I do $footer.waypoint('remove') and pass a callback to loadMorePosts which binds waypoint to footer once again. This is just a technicality - waypoint need you to remove the trigger while you fetch more HTML, other your page might act funny..

This is more or less that..

I tried to make this as simple as possible, but it's a huge issue to cover in one answer. So let me know if I can do more to clear things up.