Infinite Scroll With Loader - jQuery infiniteScroll.js
File Size: | 23.5 KB |
---|---|
Views Total: | 7863 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.