You ask about lazy loading.
Well, the answer should include the server side. Your question does not indicate what type of server language you are using. In my answer, I will use some basic PHP code to mock random blog posts.
Lazy loading means that we only load what the user can see, and then load more data as needed.
Downloading data means - request from the server. This is usually AJAX , but not necessary. (although you can probably use AJAX). JQuery has a wonderful ajax interface .
The biggest question is what should provoke my next load - therefore, all the plugins.
I took the advice from Tgr and applied a lazy load with waypoints. I even used a waypoint tutorial for lazy loading , as suggested by Tgr (give Tgr more requests).
You can see my implementation on my website.
What I did was a false blog post with a changing title. Every time the user scrolls enough, I get more messages from the server.
I added a download link for my source so that you can download and start playing with it. just run main.html and you're good to go.
The more_posts.php file creates a lorem ipsum message with a random header. (I need some kind of fake content to have a scroll on the page).
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 header.
This should look familiar to you since you already have 25+ posts on your blog.
The real logic lies in main.html - part of the HTML looks like this
<section id="container"> </section> <footer> <nav> <ul> <li class="more"><a href="more_posts.php" title="Traditional navigation link">Next Page</a></li> </ul> </nav> </footer>
The idea is that you have a section that contains the first few posts and gives you a scroll on the page. At the bottom, you have a more link within the footer , which when disabling JavaScript should act like a regular “next” link.
Waypoint uses this link to launch the next download. Whenever the link is about to be shown on the screen, we will use ajax to automatically receive the next message.
So, the JavaScript part looks like this:
$(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 loadMorePosts function calls the $.get method, which is a simpler syntax for $.ajax({type:'GET' .. }) . It uses the same URL as the link href attribute. 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 get the first post that I want to show. Then I tell the waypoint to listen to the footer - and whenever the footer gets closer, I go and get more messages.
There's the tricky part where I do $footer.waypoint('remove') and pass the callback to loadMorePosts , which again connects the waypoint to the footer. This is just technicality - the waypoint requires you to remove the trigger while you get more HTML, and your other page can play funny.
It is more or less what ..
I tried to make this as simple as possible, but this is a huge problem that should cover one answer. So let me know if I can do more to figure it out.