Today I’m releasing www.infinite-scroll.com. Essentially infinite scroll is using ajax to pre-fetch content from a subsequent page and add it directly to the user’s current page. If you have no idea what I’m talking about, you should scroll down to the bottom of aurgasm.us, roflcon.org, or blog.molecular.com.
There is a full design pattern explanation describing when to use it, and considerations to think about when implementing. I also wrote a history of infinite scroll, to cover the history of this somewhat new ajax-enabled interaction technique.
But most importantly, there are two software releases in here:
The Infinite Scroll Wordpress plugin
The Infinite Scroll jQuery plugin
Check it all out at www.infinite-scroll.com.
Since this is a development-focused blog, you may ask…
How is it done?
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:
1 2 3 4
So the infinite scroll plugin 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?
The rest of the code maintains the status of the ajax call, dies when it finishes going through your pages, and show/hides the loading notification. Please take a look and let me know what you think!