This time I will share jQuery Plugin and tutorial about Infinite Scroll View Using jQuery XMLHttpRequest – Simple iScroll, hope it will help you in programming stack.
Simple iScroll is a tiny jQuery infinite scroll plugin which dynamically loads and appends more contents when you scroll to the boundary of a container or the whole document.
How to use it:
1. Install & download the Simple iScroll.
2 |
$ npm install @kanety/jquery-simple-iscroll --save |
2. To use this plugin, include the minified version of the Simple iScroll plugin after jQuery.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/jquery-simple-iscroll.js"></script> |
3. Create group of links pointing to external files to be loaded into the infinite scroll view.
1 |
<div id="paging" style="display: none;"> |
2 |
<a class="prev">prev</a> |
3 |
<a href="index.1.html">index.1.html</a> |
4 |
<a href="index.2.html">index.2.html</a> |
5 |
<a href="index.3.html">index.3.html</a> |
6 |
<a href="index.2.html" class="next">next</a> |
4. Create a loading indicator which will appear when loading more content.
1 |
<div id="loading" style="display: none;">Loading...</div> |
5. Initialize the plugin on the target container and override the default settings as follows:
1 |
$('#container').simpleIscroll({ |
6. Specify the margin size at which point to trigger the infinite scroll. Default: 0.
1 |
$('#container').simpleIscroll({ |
7. Event handlers.
01 |
$('#container').simpleIscroll({ |
03 |
}).on('load:start', function(e, href) { |
05 |
}).on('load:end', function(e, href) { |
07 |
}).on('load:success', function(e, $content, $paging) { |
09 |
}).on('load:failure', function(e, nextHref, xhr, status, error) { |
This awesome jQuery plugin is developed by kanety. For more Advanced Usages, please check the demo page or visit the official website.
