Infinite scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user’s current page.
Problem Summary:
User is browsing paged content.
Use When:
- Retaining the user is important and clicking “Next Page” is a usability barrier.
- The full content available is too large to show on initial load.
- The content is available in paged chunks: search results, blog posts, product listings portfolio features.
Advantages:
- Users are retained on the site far better.
- Users are less likely to continue on to the next “page” if they have to click something versus it being delivered automatically to them. [citation needed]
- Requires no adjustment in a user’s typical reading habits.
- The added functionality needs no affordances or instruction.
- As long as the functionality is enhancing an existing navigational structure (like the wordpress plugin here), it remains SEO-friendly and Accessible. It will degrade gracefully if a user does not have JavaScript enabled..
Disadvantages:
- The “footer” of the page will be typically impossible to reach.
- Currently there is no way to cancel or opt-out of the behavior.
- There is no permalink to a given state of the page.
- Dynamically adding more content to the page increases the memory footprint of the browser. Depending on the browser, this could account for around 50megs of RAM.
- Analytics will not immediately capture the event, so custom configuration is required.
Implementation Recommendations:
- Depending on site latency, new content can be fetched aggressively (when a user has 500px of the page left to scroll) versus at the last moment (with ~100px left).
- User should be notified when there is no more content available.
- Consider a faux pagination widget to allow for navigation within the new content. Travis Isaacs has ideas on a running pagination.
- Infinite scroll should be implemented as progressive enhancement. Typical navigation/pagination should be present for users with javascript disabled. Javascript-enabled users, however, will experience the more rich reading functionality.
Examples in the wild:
- Humanized Reader
- SocialThing
- Live.com Image Search
- Soup tumblelogs
- Google Reader, Yahoo Mail use the same technique but within a container
I couldn’t agree more with the philosophy here. At work, we have a lot of paging, and moving forward I want to try to institute something like this, however - I have one lingering question: What to do to manage memory growth? There comes a point in instantiating objects, lets say, each post is a new element - when this continually grows - your reference count also grows. What if the scrolling is on the order of hundreds of items?
I only had one initial idea, which was to remove references to posts that are within a certain limit, like 100 items previous. Then, re-initiate the gets for those hundred if the user scrolls up, and do the same thing going down.
Essentially you would have a window of, for example, 100 items in the viewport above your viewing area, and potentially 100 items below your viewing area (if the user had scrolled back up). Beyond that references are removed, or objects/DOM is emptied.
Any other ideas on a viable solution to the scalability of this? Anything is appreciated. Thanks! http://theuiguy.blogspot.com
Yeah I’ve noticed this myself. I run it on my mp3 blog Aurgasm and a few people have mentioned growing memory use. So I agree this isn’t scalable for a rich media site that has >100 pages, but really I don’t know what that upper bound is.
Perhaps it doesnt trash the content 100 items (or whatever) ago, but instead stores the innerHTML in a javascript object, it would certainly be a hugely reduced memory footprint. One i wouldn’t be worried about.
This does deserve some more thought. Thanks for sharing yours.
Hello. I was looking for some ideas on how to implement this on a new website, and I’m glad to see there is something ready for Wordpress already. Thanks a lot.
I just have one question. My idea is to keep normal paged navigation for the actual website, but I would like to implement this for comments only. Do you think it’s a possibility with the current system, or would I need to change a lot for the plugin to work like that?
Thanks again for the great work.
Cheers.
Great job! I’m using this on my personal site :-)
Maybe you are interested on some changes I’ve made to have pagination ;)
You can check them uot in neo22s.com
I will do a post about how to do something like this :D
ok, I did a plugin I hope is useful http://neo22s.com/wp-pagescroll/
Theres another example of infinite scroll in action - dzone.com, when you scroll down the system produces more results which arent fetched until you reach the bottom of the scrolling area…
My idea is to keep normal paged navigation for the actual website, but I would like to implement this for comments only. Do you think it’s a possibility with the current system, or would I need to change a lot for the plugin to work like that?
Going to attempt to get this running on my tumblr page. Hopefully support for other platforms will come around soon.
Is this theme compatible with wordpress 2.3.3? Please send me an email (you have it) and let me know as I would likeIs this theme compatible with wordpress 2.3.3? Please send me an email (you have it) and let me know as I would like to use this. to use this.
Any idea how to solve the problem with seo, I noticed that if we use this kind of patterns, there is no way google or other search engine will index results.
Thomas,
The infinite scroll code that I offer is 100% SEO happy. It reuses existing pagination links, so users without javascript click those (and the search spiders).. and the users with javascript get the enhanced experience.
Amazing plugin, any chance of making it work for Joomla 1.5.x? Pretty, pretty please?
Cheers!
LorD
thanks for this good plugin, but I want it to work with another plugin which would greatly enhance this infinite scroll: the “Smooth Scroll Links [SSL]“, because when you scroll down very deeply there’s should a link to “back to top”, so I added the SSL plugin, it will take visitors back to top smoothly, but there’s a problem that this infinite scroll can’t work well with SSL, when there’s new content refreshed by infinite scroll, the “back to top” link didn’t got ssl effect! you can see my site as example, it seems the js calling order’s problem, and I can’t fix it.
LifeNT, I added the code to the Plugin Compatibility post. :)