Easy Infinite Scroll For Both Mobile & Desktop - jQuery loadMore

loadMore is a tiny and easy jQuery infinite scroll plugin that dynamically loads more content as you scroll down to the bottom of the page or by pressing the 'Load More' button.

More Features:

• Asynchronous loading or not.
• With or without AJAX requests.
• Content loading indicator.
• Error/success handlers.

How to use it:

1. To get started, include the main JavaScript jquery.loadMore.min.js after jQuery.

<script src="jquery.min.js"></script>
<script src="jquery.loadMore.min.js"></script>

2. Automatically loads more content as you scroll down the page.

$('#box').loadMore({
  loadType: 'auto',
  url: "data.json",
  dataType: 'json',
  data: {},
  type: 'get',
  success: function (res) {
    // a function to render data
  }
  error: function () {},
  callback: function () {
    // execute a callback when scrolled down to the bottom
    // ideal for loading more data when the AJAX is disabled
  }
});

3. Manually loads more content as you click/tap the Load More button.

$('#box').loadMore({
  loadType: 'click',
  url: "data.json",
  dataType: 'json',
  data: {},
  type: 'get',
  success: function (res) {
    // a function to render data
  }
  error: function () {},
  callback: function () {
    // execute a callback when scrolled down to the bottom
    // ideal for loading more data when the AJAX is disabled
  }
});

4. Enable/disable asynchronous loading. Default: true.

$('#box').loadMore({
  async: false
});

5. Determine the scroll offset to trigger the infinite scroll. Default: 100px.

$('#box').loadMore({
  scrollBottom: 200
});

6. Determine the position where you want to place the Load More button.

$('#box').loadMore({
  conLocation: 'body'
});

---

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