Infinite Scroll and Load More Plugin With jQuery - Load More
Just another jQuery plugin that allows you to dynamically load local or external data into current webpage when scrolling down or by clicking on the 'load more' button.
JQuery Infinite Scroll has brought about a little revolution when it comes to navigating blogs and websites in general. Replacing the pagination at the bottom of each page which would usually take you to the next page or older entries, Infinite Scroll simply loads said content onto the current page. Sounds complicated, but simply means that all you need to do is scroll and scroll until you reach the very end of a website. Browsing for lazy people, yet very aesthetically pleasing if done correctly.
A small history of Infinite Scroll
The first time I stumbled upon Infinite Scroll was on Tumblr, which is the community has been using this technique the most. The Tumblr dashboard itself can be used with Infinite Scroll and various themes on Tumblr all come with Infinite Scroll installed. Another website that caught my eye was Tumblr Mosaic Viewer which allows you to view any public Tumblr account in a clean and easy to navigate grid, although it only displays image posts. After that it was soon popping up everywhere and including websites like Dazed and Confused, Lookbook.nu or Fab.com.
There are many different scripts that let you achieve the effect of infinite scroll, including Cody Sherman’s Infinite Scrolling Code (for Tumblr) and Paul Irish’s JQuery Infinite Scroll (can be used for any platform). WordPress also has a plugin that enables Paul Irish’s Infinite Scroll for your self-hosted blog.
I will soon put up a tutorial that shows how to implement the Infinite Scroll effect the easy and hard way. So stay tuned for that. In the meantime, before you go looking for a theme that supports Infinite Scroll, read through the next few lines to find out if it is the right thing for you!
Pros of using Infinite Scroll
Easy Navigation: The main benefit of using Infinite Scroll is definitely the easy navigation of your website. Users do not have to look for the pagination, instead content is simply loaded on and on. It makes browsing and scrolling easy and fun.
Modern Look: If done correctly it gives your blog as a whole a new and modern aesthetic. There is nothing more pleasing to find a well designed website using Infinite Scroll.
Responsive: Since Infinite Scroll is coded with JQuery it works on iPhone, iPad, iPod Touch. Which is good, because that means mobile users can also enjoy browsing.
Cons of using Infinite Scroll
Other Scripts Not Supported: Infinite Scroll can only load text and images so if you have used other scripts ( e.g.: the ones that support music players, slideshows, lightboxes…) they might not work anymore. There is a way around this, which I will talk about in another tutorial.
Overlapping: Having coded a number of themes with Infinite Scroll one of the most common problems is overlapping of images. Especially if you are using it in combination with a grid theme. This usually happens if the images you are loading are HQ (500KB+) There are many different solutions for this that work well one way or another. To avoid picking a theme that overlaps, read through our checklist on how to choose a theme with Infinite Scroll.
Choppy loading: Sometimes you might find a blog which loads by overlapping it’s posts and then re-arranging them after some time. This doesn’t look pretty and is what happens if Infinite Scroll is not implemented properly.
Browser Memory: Browsing a website that uses Infinite Scroll gobbles up a lot of browser memory. That means that after some time your browser might crash. This is because it’s memory is being maxed out by all the loading Infinite Scroll is doing. And a browser crashing repeatedly is most annoying.
No Footer: Since the script keeps loading on and on it is impossible to put any content into the footer as the user can never reach it. You can swap the automatic loading for a “load more” button to give the user time to look at the footer if you like.
Fewer loads: If your website has advertising that is rated by page loads or hits, you will get far fewer hits using infinite scroll.
Should I use Infinite Scroll?
You might be wondering, whether you should use Infinite Scroll or not. In my experience it works best with blogs and portfolios, but can be used with any website that has extended archives. So if you are planning on setting up an image heavy project you are good to go. Grid themes in combination JQuery Infinite Scroll works best, especially with JQuery Masonry.
Checklist:
Is the browsing and loading “smooth”? (No overlapping)
Is it slowing down your browser? If yes, the code is not lightweight enough and might give other users problems.
Does the theme have a “back to top” button?
Does it have a “sticky” navigation that scrolls along with the content? (Not a must, but very handy)
Is it giving you feedback on it’s loading progress?
Best practise themes:
Here are some themes that make the best out of Infinite Scroll:
Tumblr:
Opaque by Andbamnan
Disassemble by Smpl Design
Meringue by Smpl Design
WordPress:
Sight by WpShower
If you have any other themes to add to this list drop me a comment.
