Infinite Scroll With Loader - jQuery infiniteScroll.js

A lightweight and simple-to-use jQuery infinite scroll plugin which automatically loads more content via AJAX and appends the result to the bottom of the current page when scrolling down.

Also provides a customizable loading spinner that indicate the current status when the plugin loads external pages into the document.

How to use it:

1. Place the JavaScript file jquery-infiniteScroll.js after the latest version of jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="jquery-infiniteScroll.js"></script>

2. Call the function on the target content area to which you want to append more pages and specify a sequence of files you want to load.

<div class="myInfiniteScroll">
  ...
</div>

$(".myInfiniteScroll").infiniteScroll({
  files: [
    "content1.html",
    "content2.html",
    "content3.html"
  ],
});

3. Customize the color of the content loader.

$(".myInfiniteScroll").infiniteScroll({
  files: [
    "content1.html",
    "content2.html",
    "content3.html"
  ],
  preloaderColor: "#000"
});

4. The default function to handle the data.

$(".myInfiniteScroll").infiniteScroll({
  files: [
    "content1.html",
    "content2.html",
    "content3.html"
  ],
  processData: function(data){               
    var content = $(`<div style='opacity:0'>${data}</div>`);
    $('.' + settings.markSelector).before(content);
    content.fadeTo(settings.fadeDuration, 1);
  },
});

5. Callback functions available.

$(".myInfiniteScroll").infiniteScroll({
  files: [
    "content1.html",
    "content2.html",
    "content3.html"
  ],
  beforeLoadNewContent: function () { },
  processData: function(data){               
    var content = $(`<div style='opacity:0'>${data}</div>`);
    $('.' + settings.markSelector).before(content);
    content.fadeTo(settings.fadeDuration, 1);
  },
  afterLoadNewContent: function () { },
  onEnd: function () { }
});

---

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