jQuery Waypoints

Infinite Scroll

First include the shortcut script.

<script src="/path/to/waypoints-infinite.min.js"></script>

The Infinite Scroll shortcut is used to transform a traditional "Next Page" navigation into an AJAX-powered infinite scrolling UI pattern. Its default usage looks like this:

$('.infinite-container').waypoint('infinite');

In this example, our shortcut will create a waypoint to be fired when the bottom of .infinite-container comes into view. When that waypoint fires it will go through several steps:

  1. Fire the onBeforePageLoad callback. This callback can be passed to the infinite shortcut in the options object. For our simple example, we have no callback.
  2. Add the infinite-loading class to the container. This class gives us a way to style the container during loading. It should be used to give the user a hint that more content is being loaded.
  3. Send an AJAX request for the next page. The script will look for a link with a class of infinite-more-link and use its href as the new location to fetch.
  4. Append new items from the returned HTML. When the AJAX request returns it looks for any HTML elements with a class of infinite-item and appends them to the container.
  5. Replace the "more" link. The newly returned page should also contain a link to its own next page. It looks for the element with class infinite-more-link and replaces the existing one.
  6. Remove the infinite-loading class.
  7. Fire the onAfterPageLoad callback. As with the first callback, this can be passed in as an option but defaults to a no-op.

These steps are repeated every time the user reaches the bottom of the container until the AJAX request does not return a "more" link element, as this indicates we're on the last page. At that point the waypoint is destroyed.

The "infinite" waypoint function accepts a number of options in addition to the usual Waypoints options. Here are the defaults:

$('.infinite-container').waypoint('infinite', {
  container: 'auto',
  items: '.infinite-item',
  more: '.infinite-more-link',
  offset: 'bottom-in-view',
  loadingClass: 'infinite-loading',
  onBeforePageLoad: $.noop,
  onAfterPageLoad: $.noop
});
container
The default value of 'auto' means that the element .waypoint is called on will act as the container. Newly loaded items are appended to this container. This can be set to a different selector, but should only be done when you want the waypoint trigger element to be different from the container of infinite items.
items
A selector string that matches the items to pull from each AJAX loaded page and append to the container.
more
A selector string that matches the next-page link.
offset
The same as the normal Waypoints offset option, but we set the default to 'bottom-in-view' instead of 0.
loadingClass
The class that is added to the container during page loads and removed after items are appended.
onBeforePageLoad
A function to execute before the AJAX request is sent off to load a new page.
onAfterPageLoad
A function to execute after new page items have been loaded and appended to the container.

Example

More