End of life Infinite Ajax Scroll 2

Published January 3, 2020

First released six years ago on February 1st, 2014, Infinite Ajax Scroll 2 has accomplished more than I could ever dream of. What started more than eight years ago as a hobby project, based on a personal need, turned out to be a profitable side project, generating over $12k in revenue and almost 600 licenses sold.

Since 2014 a lot has changed in the JavaScript-world and the version 2 codebase hasn't evolved with it, making it unmaintainable. This triggered the development of Infinite Ajax Scroll 3. With version 3 now in public beta and version 2 unmaintainable it's time to call the end of life for version 2.

Version 2 will no longer receive updates. Outstanding issues and pull requests will be closed and all my attention will be focused on version 3. Users of version 2 are advised to upgrade to version 3.

Why upgrade?

Infinite Ajax Scroll 3 is build from the ground up, with modern websites and apps in mind. It is no longer dependent on jQuery, making it more lightweight. It has a new and improved event based architecture, giving developers more flexibility and a beter developer experience. It also supports ES6 modules and imports, and can used with NPM or various CDN's.

Checkout version 3 examples or read the documentation on how to get started.

Upgrade your license during beta and save 20% with discount code BETA20.

Common Pitfalls of Infinite Scroll

Published December 13, 2019

Infinite scroll is everywhere you look. Twitter, Facebook and Pinterest are probably the most famous examples. It became popular with the introduction of real-time streams, as you come across on social networks. But now a days you see it everywhere, from e-commerce websites to Single Page Applications.

In this article we will explore some common pitfalls with infinite scroll implementations and provide answers on how you can avoid them using Infinite Ajax Scroll.

TL;DR: Infinite Ajax Scroll can help us with (1) keeping our footer reachable, (2) not breaking the back button and (3) optimizing for SEO.

1. Unreachable footer

A common problem with infinite scrolling pages is when a footer is unreachable. A footer often contains important information visitors are interested in, like contact information. Visitors will become frustrated when they can't reach it due to a faulty infinite scroll implementation.

To solve this issue a number of solutions come to mind.

Solution A: Sticky footer

Okay, this feels a bit like cheating, but nonetheless it's very effective. In stead of having the important links in a footer at the bottom of the page, we can place them in a sidebar. A great example of this is Twitter. Their "footer" links are in a fixed sidebar. So no matter how far a user scrolls, the links are always available.

Instead of putting the footer links in a sidebar, we could also make the footer itself sticky.

Solution B: Add a "Load more" button after 1 or more pages

This is probably the most common solution. For the first one or two pages we enable infinite scroll, after that we show a "Load More" button. This solution is simple and effective.

To build our solution we can take advantage of Infinite Ajax Scroll's page event.

import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';

window.ias = new InfiniteAjaxScroll('.container', {
  // configuration
});

ias.on('page', (e) => {
  // from page 2 onwards we stop automatic loading of the next page
  if (e.pageIndex >= 2) {
    this.disableLoadOnScroll();

    // @todo show load more button and restore loadOnScroll (not yet available during beta)
  }
});

Solution C: Measure scroll speed and adjust accordingly

This is a more advanced solution and builds on this hypothesis: When a user scrolls fast to the bottom of the page, (s)he probably wants to reach the footer.

So if we determine, based on the scroll speed, that the user wants to reach the footer, we disable the automatic loading of the next page and show a "Load More" button.

Slow scrolling = automatic loading of next page
Fast scrolling = "Load More" button

The complex part here is the scroll tracking. Luckily Infinite Ajax Scroll provides this information with the scrolled event. Let's see how we can utilize this:

import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';

window.ias = new InfiniteAjaxScroll('.container', {
  // configuration
});

ias.on('scrolled', (e) => {
  // high delta means high scroll velocity
  // @todo 300 is arbitrary and needs some experimentation
  if (e.scroll.deltaY > 300) {
    // disable automatic loading of next page
    this.disableLoadOnScroll();
  }

  // @todo show load more button and restore loadOnScroll (not yet available during beta)
});

2. Breaking the back button

Another problem with infinite scroll can arise when the history isn't updated when the user scrolls through the pages. Say a user scrolled to page three and clicks an article link. After reading the article the user wants to go back to the list to read another article. Without history support the user would return to page one. Of course most users would now leave.

Not only does this break the back button, but it also prevents users from sharing the url to the current page. Normally a user can copy the url from the browser and bookmark it, or share it with others. Without history support this is not an option, as the url always stays the same, no matter to which page the user has scrolled.

Infinite Ajax Scroll solves this issue. It constantly keeps track of the current page and emits a page event on change. As a developer we can hook into this event and update the url and browser title:

import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';

window.ias = new InfiniteAjaxScroll('.container', {
  // configuration
});

// update title and url then scrolling through pages
ias.on('page', (e) => {
  document.title = e.title;

  let state = history.state;

  history.replaceState(state, e.title, e.url);
});

You can see this behaviour in our blog example. As we scroll between pages the browser url is automatically updated to match the current page.

3. SEO unfriendly

An import factor to keep in mind while implementing infinite scroll is its impact on SEO. If we build an infinite scroll without a fallback to a non-javascript pagination, we could negatively affect our SEO ranking.

Google has a great article about this. Some of its recommendations include:

  1. Make sure your pages can be accessed when JavaScript is disabled
  2. Keep reasonable content length and page load times per page
  3. Chunk your pages without overlap
  4. Structure urls correctly for search engine processing
  5. Use the browsers History API when scrolling through pages
Infinite scroll recommendations by Google

Point 5 can easily be solved by Infinite Ajax Scroll (see previous pitfall), points 1-4 we have to keep in mind when building our (server-side) pagination.

Public Beta Infinite Ajax Scroll 3

Published February 3, 2019

I’m excited to share Infinite Ajax Scroll 3 Public Beta with you, and I’m even more excited to hear about what you’re able to accomplish with it. If you create something great, or find something that can help it be better, I’d love to hear from you about it.

Hundreds of developers already participated in the Private Beta. I'm very grateful with their help of testing Infinite Ajax Scroll 3.

Ready to get started? Checkout the documentation or play with one of the examples and start creating your next infinite scroll experience today!

Because this is a beta, not everything is perfect yet. However, with your help and feedback, I can make Infinite Ajax Scroll as useful and easy to use as possible.

All the best,
@fieg

Announcing Infinite Ajax Scroll 3

Published March 27, 2018

We are building a new version from the ground up.

Plug and play

With our plugin it has never been easier to add infinite scroll to your website or application. With just a few lines of code you're set, saving you time and money. Need some inspiration for your infinite scroll experience? Version 3 comes with a collection of beautiful examples and guides.

Highly customizable

Infinite Ajax Scroll is build with maximum flexibility in mind. Every website or application is different, with a different use case. We understand that. Using a well-thought-of API and event based system you can hook into the library and bend it to your rules.

Built for the future

The JavaScript world has changed a lot since version 2 of Infinite Ajax Scroll. In the past years thousands of websites have been trusting Infinite Ajax Scroll for their infinite scrolling websites and apps. Version 3 will be a complete rebuild with the latest JavaScript and browser technologies. This also means no more dependency on jQuery and better integration with Webpack, module loaders and NPM. Making it ready for the coming years.

Infinite Ajax Scroll v2.3.0 released

Published March 16, 2018

Infinite Ajax Scroll v2.3.0 has just been released and is now available for download.

This release contains various improvements:

  • More fine-grained control over the ajax request with the availability of the ajaxOptions property on the load event.
  • Added a new option initialize, giving you more control about when to activate IAS.

And a minor fix:

  • Fix: ready event is now actually triggered at least once

We like to give a special thanks to our community contributors who helped out with these changes:

Infinite Ajax Scroll v2.2.2 released

Published August 26, 2016

Infinite Ajax Scroll v2.2.2 has just been released and is now available for download.

This release contains various fixes and improvements:

  • Fix: render callback is not executed when using a custom render function (fixes #198)
  • Fix: unpredictable behaviour when multiple instances used the same selectors for sub-elements (fixes #93)
  • Stop ajax responder if instance was destroyed or reinitialized

We like to give a special thanks to our community contributors who helped out with these fixes:

Infinite Ajax Scroll v2.2.1 released

Published May 11, 2015

Infinite Ajax Scroll v2.2.1 has just been released and is now available for download.

This release contains a fix for a problem causing duplicate items to appear (fixes #175 and #183).

Infinite Ajax Scroll v2.2.0 released

Published January 16, 2015

Infinite Ajax Scroll v2.2.0 has just been released and is now available for download.

This is a pretty big release improving the overall stability of the plugin, especially for those who want to use infinite scroll with pages that get updated through AJAX, like search filters and the like.

Here is the full list of fixes and changes:

  • Improved documentation on delay and negativeMargin options
  • Added FAQ to support documentation
  • Added Wordpress cookbook
  • Fix: Maintain history state object when changing pages (longzheng)
  • Fix: no longer caching $itemsContainer (fixes #153)
  • Fix: really destroy instance on destroy method (fixes #160)
  • Fix: Replaced deprecated size() with .length (fixes #162)
  • Fix: Reworked binding and unbinding (fixes various issues with unbinding)
  • Fix: Bail out when device doesn't support onScroll event (like Opera Mini) (fixes #146 by fflewddur)
  • Added reinitialize method

If you experience any issues with this release, please let us know through our issue tracker.

Infinite Ajax Scroll v2.1.3 released

Published October 5, 2014

Infinite Ajax Scroll v2.1.3 has just been released. Here is a list of changes:

  • Bug #152 Improve compatibility support when Prototype is used along with jQuery (antoinekociuba)
  • Added documentation to GIT repository to help collaboration

Our take on Infinite Scroll

Published January 16, 2014

Infinite Scroll is a UX pattern in which a typical pagination is replaced by a script that monitors the current scroll position and loads the next page when a visitor reaches the end of the page. Many websites use infinite scroll including major ones like Twitter and Facebook.

Infinite Ajax Scroll has a unique take on Infinite Scroll. Lets explore some of its advantages.

Progressive enhancement

Infinite Ajax Scroll enhances the user experience of your website using JavaScript and AJAX. Visitors without JavaScript enabled will fallback on the regular server-side pagination. This also includes search engine crawlers, which means your website can be fully indexed.

Plug and play

When building the plugin we wanted it to be simple. While building a server-side pagination is easy, making a client-side infinite scroll can be hard. You have to account for many different browsers and use cases. With Infinite Ajax Scroll you can focus on the easy part: server-side pagination. Most platforms like Wordpress even come with these out of the box.

Extensions

Infinite scroll can have its weaknesses. For example the inability to permalink the current scrolled to page or unable to reach a footer, because while you scroll down, pages keep loading.

Infinite Ajax Scroll solves these issues with extensions. Take for example the History extension. When enabled the current url is automatically updated when the visitor scrolls through the pages. Now it's easy to copy the url from the address bar and share it with others and land right on the correct page.

The Trigger extension on the other hand lets you configure a "click here to load more" trigger when a visitor scroll through a specified number of pages. This is similar to how Google's infinite scroll works on Image Search.