This time I will share jQuery Plugin and tutorial about Infinite Ajax Scroll Plugin In jQuery & Vanilla JS – ias.js, hope it will help you in programming stack.
| File Size: | 26.3 KB |
|---|---|
| Views Total: | 24182 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
ias.js (Infinite Ajax Scroll) is a jQuery and pure (vanilla) JavaScript plugin that helps you create SEO-friendly, progressively enhanced infinite scrolling effect with ajax technique for loading more items of your page when scroll down.
Note that the latest Infinite Ajax Scroll (v3.0+) has dropped the jQuery support. You can use it as a vanilla JavaScript library.
What is Infinite Scroll?
Infinite Scroll is an awesome and powerful effect that applied to many modern websites like pinterest, facebook, twitter and etc. It provides a basic mechanism for triggering more contents to be loaded when the bottom of the page is reached.
You might also like:
Table Of Contents:
How to use it (v3.x, Vanilla JS version):
1. Install and import the Infinite Ajax Scroll.
1 |
# NPM |
2 |
$ npm install @webcreate/infinite-ajax-scroll --save |
1 |
import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll'; |
2. Or load the UMD version of the Infinite Ajax Scroll library from a CDN.
1 |
<script src="https://unpkg.com/@webcreate/infinite-ajax-scroll@latest/dist/infinite-ajax-scroll.min.js"></script> |
2 |
<!-- OR --> |
3 |
<script src="https://cdn.jsdelivr.net/npm/@webcreate/infinite-ajax-scroll@latest/dist/infinite-ajax-scroll.min.js"></script> |
3. The HTML for the infinite scroll view.
01 |
<div class="container"> |
02 |
<div class="item">...</div> |
03 |
<div class="item">...</div> |
04 |
<div class="item">...</div> |
05 |
... |
06 |
</div> |
07 |
08 |
<div class="pagination"> |
09 |
<a href="page2.html" class="next">Next</a> |
10 |
</div> |
4. Initialize the Infinite Ajax Scroll and done.
1 |
let ias = new InfiniteAjaxScroll('.container', { |
2 |
item: '.item', |
3 |
next: '.next', |
4 |
pagination: '.pagination' |
5 |
}); |
5. All possible options.
01 |
let ias = new InfiniteAjaxScroll('.container', { |
02 |
03 |
// item selector |
04 |
item: '.item', |
05 |
06 |
// selector of the next link |
07 |
next: '.next', |
08 |
09 |
// pagination selector |
10 |
pagination: '.pagination', |
11 |
12 |
// or 'JSON' |
13 |
responseType: 'document', |
14 |
15 |
// by default the plugin binds Infinite Ajax Scroll to scroll and resize events |
16 |
// set the option to false and bind your own events using the bind() method |
17 |
bind: true, |
18 |
19 |
// selector of scrollable container |
20 |
scrollContainer: window, |
21 |
22 |
// config the loading spinner |
23 |
// string|Object|boolean |
24 |
spinner: false, |
25 |
26 |
// event logger |
27 |
// Object|boolean |
28 |
logger: true, |
29 |
30 |
// auto loads content on scroll |
31 |
loadOnScroll: true |
32 |
|
33 |
}); |
6. API methods.
01 |
// bind/unbind events |
02 |
ias.bind(); |
03 |
04 |
// bind/unbind events |
05 |
ias.bind(); |
06 |
07 |
// load next page manually |
08 |
ias.next(); |
09 |
10 |
// load an URL and return a promise |
11 |
ias.load(URL); |
12 |
13 |
// append an array of element to the parent |
14 |
ias.append(items, parent); |
15 |
16 |
// disable load on scroll |
17 |
ias.disableLoadOnScroll(); |
7. Event handlers.
01 |
ias.on('binded', function(e){ |
02 |
// do something |
03 |
}); |
04 |
05 |
ias.on('binded', function(e){ |
06 |
// do something |
07 |
}); |
08 |
09 |
ias.on('unbinded', function(e){ |
10 |
// do something |
11 |
}); |
12 |
13 |
ias.on('scrolled', function(e){ |
14 |
// props: |
15 |
// scroll.y Current vertical scroll position from the top of the page (can be negative) |
16 |
// scroll.x scroll.deltaY |
17 |
// scroll.deltaY Delta between current vertical scroll position and previous position |
18 |
// scroll.deltaX Delta between current horizontal scroll position and previous position |
19 |
}); |
20 |
21 |
ias.on('resized', function(e){ |
22 |
// props: |
23 |
// scroll Object with x y coord of the current scroll position |
24 |
}); |
25 |
26 |
ias.on('hit', function(e){ |
27 |
// props: |
28 |
// distance The distance to the scroll threshold in pixels |
29 |
}); |
30 |
31 |
ias.on('next', function(e){ |
32 |
// props: |
33 |
// pageIndex The page index of the next page (the page that is about to be loaded) |
34 |
}); |
35 |
36 |
ias.on('load', function(e){ |
37 |
// props: |
38 |
// url The url that is about to be requested |
39 |
// xhr The configured XMLHttpRequest that is going to be used |
