pw-page-loader
v0.2.4
Published
Ajax page loader
Downloads
15
Maintainers
Readme
PW Page Loader
Javascript library to load pages using ajax and append the result in the current page, in order to create a infinite scrolling. It has the following features:
- Follows the progressive enhancement strategy: if javascript fails, the web page keeps working
- Accessible: After load the new page, the history url and title is changed. This allows to copy and share the url.
- High performance: Use the Intersection Observer API (and a polyfill) to track the page viewed currently.
Install
Requirements:
- NPM or Yarn to install the package and the dependencies
- Webpack (or any other javascript loader)
npm install pw-page-loader
Usage
HTML
Let's start with the following html code:
<ul class="images">
<li><img src="http://placehold.it/500x300"></li>
<li><img src="http://placehold.it/500x300"></li>
<li><img src="http://placehold.it/500x300"></li>
<li><img src="http://placehold.it/500x300"></li>
<li><img src="http://placehold.it/500x300"></li>
<li><img src="http://placehold.it/500x300"></li>
<li><img src="http://placehold.it/500x300"></li>
<li><img src="http://placehold.it/500x300"></li>
<li><img src="http://placehold.it/500x300"></li>
<li><img src="http://placehold.it/500x300"></li>
</ul>
<nav class="pagination">
<a href="page2.html">Next Page</a>
</nav>
JS
Use javascript for a complete experience:
import PageLoader from 'pw-page-loader';
//Init the loader
const loader = new PageLoader('.images', '.pagination a');
//Enable auto-click
loader.autoClick(true);
API
constructor
Create a new instance of PageLoader
. The arguments are:
resultSelector
A string with the css selector to the list of the resultbuttonSelector
A string with the css selector to the link to the next pagecontext
Optional context for the selectors. The default value isdocument
.
on
Register events in the page loader workflow. The available events are:
beforeLoadPage
Just before load a new pageloadPage
When a new page has been loadedchangePage
When the current page has changed
loader.on('beforeLoadPage', url => {
console.log('Preparing to load page', url);
});
loader.on('loadPage', page => {
console.log('New page loaded', page);
});
loader.on('changePage', page => {
console.log('The current page is', page);
});
off
Unregister one or all callbacks of an event
//unregister one callback
loader.on('beforeLoadPage', callback1);
//unregister all callbacks
loader.on('beforeLoadPage');
Demo
To run the demo, just clone this repository enter in the directory and execute:
npm install
npm start
You should see something in http://localhost:8080/