Simplest jQuery Infinite Scrolling Plugin

A really simple jQuery plugin that dynamically load more content as you reach the bottom of the web page, which can be used to implement infinite scrolling.

Basic usage:

1. Load the latest version of jQuery library and the jquery.infini_scroll.js script in the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.infini_scroll.js"></script>

2. Add a loading indicator at the bottom of your list items.

<div id="J_loading" style="display:none;" >Loading...</div>

3. Create a 'load more' button that appears as you reach the max loop limit.

<div id="J_load_more" style="display:none;>Load More</div>

4. Call the plugin to enable the infinite scrolling.

$("#YOURLIST").infini_scroll({
  totalPages: 5,
  url: "ajax.html",
});

5. Setup the plugin..

$("#YOURLIST").infini_scroll({

// total pages
totalPages      : 0, 

// external resource to be loaded into your page
url             : '',
varPage         : 'p',  

// distance in px to trigger the plugin          
triggerBottom   : 100, 

// max loop limit
round           : 3, 

// CSS id for loading indicator
loadingElement  : '#J_loading', 

// CSS id for load more button
loadMoreElement : '#J_load_more', 

// enable debug mode
debug           : false 

});

---

This awesome jQuery plugin is developed by fanrong33. For more Advanced Usages, please check the demo page or visit the official website.