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.