Easy Infinite Scroll With jQuery And AJAX - infinityScroll.js

A really simple infinite scroll plugin that loads more data as the user scrolls down and displays a custom message after all content has been rendered.

How to use it:

1. Include the stylesheet infinityScroll.css and JavaScript infinityScroll.js on the page.

<link rel="stylesheet" href="/path/to/dist/infinityScroll.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/infinityScroll.min.js"></script>

2. Create a container element in which the data should be rendered.

<div id="element"></div>

3. Define your content to be rendered on the page when scrolling down. Can be HTML, JSON, XML, etc.

<!-- data.html -->
<div class="is-load-list">
  <img src="1.jpg" alt="">
  <p>Content 1</p>
</div>
<div class="is-load-list">
  <img src="2.jpg" alt="">
  <p>Content 2</p>
</div>
<div class="is-load-list">
  <img src="3.jpg" alt="">
  <p>Content 3</p>
</div>
...

4. Initialize the infinityScroll plugin.

$('#element').infinityScroll({
  type : "html",
  data : "load.html",
  loadListClass : "is-load-list",
})

5. Specify how many items to load on init.

$('#element').infinityScroll({
  type : "html",
  data : "load.html",
  loadListClass : "is-load-list",
  renderInit : 2
})

6. Customize the message to display after the last items has been rendered.

$('#element').infinityScroll({
  type : "html",
  data : "load.html",
  loadListClass : "is-load-list",
  scrollEndMessage : "read all contents!",
})

---

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