This plugin aims to progressively enhance your page. Your navigation/pagination elements should be present in the HTML for non-js users, but the plugin will utilize those links to build out a more rich browsing experience.
Download the jQuery plugin
Version 1.5.100504
jquery.infinitescroll.js and minified are now on GitHub
Usage
Minimum required configuration
This is the minimum amount of configuration you can do, if you want things to work:
// infinitescroll() is called on the element that surrounds // the items you will be loading more of $('#content').infinitescroll({ navSelector : "div.navigation", // selector for the paged navigation (it will be hidden) nextSelector : "div.navigation a:first", // selector for the NEXT link (to page 2) itemSelector : "#content div.post" // selector for all items you'll retrieve });
All options
// usage: // $(elem).infinitescroll(options,[callback]); // infinitescroll() is called on the element that surrounds // the items you will be loading more of $('#content').infinitescroll({ navSelector : "div.navigation", // selector for the paged navigation (it will be hidden) nextSelector : "div.navigation a:first", // selector for the NEXT link (to page 2) itemSelector : "#content div.post", // selector for all items you'll retrieve debug : true, // enable debug messaging ( to console.log ) loadingImg : "/img/loading.gif", // loading image. // default: "http://www.infinite-scroll.com/loading.gif" loadingText : "Loading new posts...", // text accompanying loading image // default: "<em>Loading the next set of posts...</em>" animate : true, // boolean, if the page will do an animated scroll when new content loads // default: false extraScrollPx: 50, // number of additonal pixels that the page will scroll // (in addition to the height of the loading div) // animate must be true for this to matter // default: 150 donetext : "I think we've hit the end, Jim" , // text displayed when all items have been retrieved // default: "<em>Congratulations, you've reached the end of the internet.</em>" bufferPx : 40, // increase this number if you want infscroll to fire quicker // (a high number means a user will not see the loading message) // new in 1.2 // default: 40 errorCallback: function(){}, // called when a requested page 404's or when there is no more content // new in 1.2 localMode : true // enable an overflow:auto box to have the same functionality // demo: http://paulirish.com/demo/infscr // instead of watching the entire window scrolling the element this plugin // was called on will be watched // new in 1.2 // default: false },function(arrayOfNewElems){ // optional callback when new content is successfully loaded in. // keyword `this` will refer to the new DOM content that was just added. // as of 1.5, `this` matches the element you called the plugin on (e.g. #content) // all the new elements that were found are passed in as an array });
Custom trigger, non-automatic. Twitter-style
In 1.4 you can trigger the loading of the next page of content at will. You’ll first unbind the default behavior. And then trigger the next pull whenever you like..
// unbind normal behavior. needs to occur after normal infinite scroll setup. $(window).unbind('.infscr');
// call this whenever you want to retrieve the next page of content // likely this would go in a click handler of some sort $(document).trigger('retrieve.infscr');
Demo of the triggered infinite scroll functionality.
How does it work?
There is a little known feature in the .load() method that lets you specify the CSS selector of the html you want to include. jQuery will load in any local URL, then parse the html and grab only the elements you’ve defined with your selector. This allows for some pretty fun shit: client-side transclusions (a la purple include) ; and some really kickass shit when you combo it with a local php proxy.
This is really the meat of the code:
// load all post divs from page 2 into an off-DOM div $('<div/>').load('/page/2/ #content div.post',function(){ $(this).appendTo('#content'); // once they're loaded, append them to our content area });
So it basically leverages that load() method at its core. It’s basically scraping your existing page structure, which means you don’t need to code any custom backend stuff to enable this functionality! Booyah, right?
Thanks, this blog aided me in solving some issues with the latest version, Why do they always seem to leave out vital information when they upgrade? It may be trivial to them but not for us! I’m sure i’m not alone either.
this is awesome!
just wondering if the callback will still happen if I call $(document).trigger(’retrieve.infscr’) because it doesn’t seem to — is this the same as @shamot’s problem
Can it work like Yahoo Mail (not like Google Reader)?
What I mean is — can it show the real height of the scrollbar before loading the content?
I’ve removed the fadeout animation from the Done Text.
However…
When I hit the end, go to another page and then go back– the Done Text has disappeard. Any ideas?
Just wondering, has anyone had any luck getting this working on an iPhone or iPad. I have it working fine in all computer browsers but just can’t get it working on the 2 Apple devices.
Before i spend time trying to fix it it just thought I see if it was even possible. Any pointers would be appreciated.
Thanks.
just wondering if the callback will still happen if I call $(document).trigger(’retrieve.infscr’) because it doesn’t seem to
i have code as follows but nothing happens …
$(function() {
$(”.posts”).infinitescroll({
navSelector: “#pageNav”,
nextSelector: “.next”,
itemSelector: “.posts .post”
});
});
…
…
…
1
2
3
4
5
on a side note, what happens if the HTML navigation only has the class .active on the active link, and i dont have a .next class?
I love this plugin and have implemented it on my latest project: http://www.icusawme.com
I would like to make the time that donetext is displayed longer. Is there a way to do this through configuration or do I have to dig into the library code?
You’ll have to dig into the the library code.
http://github.com/paulirish/infinite-scroll/blob/master/jquery.infinitescroll.js#L99
Change the 2000 to a bigger number. :)
G’luck!
Its almost too easy. I had the minified version, it was much harder to find the line there. Thanks Paul!
When uses the non-auto and click twice (like double click) returns:
["math:", 300, 871]
["heading into ajax", ["http://localhost/Transfer/Site/page/", "/"]]
GET http://localhost/Transfer/Site/page/2/ | 200 OK | 438ms
["heading into ajax", ["http://localhost/Transfer/Site/page/", "/"]]
GET http://localhost/Transfer/Site/page/3/ | 200 OK | 385ms
["Page not found. Self-destructing..."]
good site!
Hi,
I am loading images by making FLickr API call and populating images in div named Flickr_Container(using PHP), The number of images uploaded have exceeded my expectation and now I want to use infinite scroll for displaying images. Basically on page load I like to display 90 images and then as user scrolls down, I like to display next 90 and so on till we reach at the end. Can you help me in implementing infinite scroll for my purpose.
Thanks a lot
<a href=”" rel=’lightbox’><img src=”" width=”75″ height=”75″ />
Hi,
I am loading images by making FLickr API call and populating images in div named Flickr_Container, The number of images uploaded have exceeded my expectation and now I want to use infinite scroll for displaying images. Basically on page load I like to display 90 images and then as user scrolls down, I like to display next 90 and so on till we reach at the end. Can someone help me in implementing infinite scroll for my purpose
<a href=”" rel=’lightbox’><img src=”" width=”75″ height=”75″ />
Success usually comes to those who are too busy to be looking for it- Henry David Thoreau (1817-1862)