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
<h1> This is post number <?php echo uniqid("",true)?> </h1>
<div style="color:red">
Lorem ipsum dolor .... Quisque ut pretium nibh.
</div>
<div style="color:blue">
Lorem ipsum dolor .... Quisque ut pretium nibh.
</div>
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
<section id="container">
</section>
<footer>
<nav>
<ul>
<!-- Hijack this link for the infinite scroll -->
<li class="more"><a href="more_posts.php" title="Traditional navigation link">Next Page</a></li>
</ul>
</nav>
</footer>
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.
