First include the shortcut 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:
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:
onBeforePageLoadcallback. This callback can be passed to the infinite shortcut in the options object. For our simple example, we have no callback.
infinite-loadingclass 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.
infinite-more-linkand use its
hrefas the new location to fetch.
infinite-itemand appends them to the container.
infinite-more-linkand replaces the existing one.
onAfterPageLoadcallback. 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: