Automatically sends ajax requests as the user scrolls an element. Provides options to control where the response is injected into the DOM (usually above a footer).
Set it up just like you would any other pagination on the server. This example is totally simplified.
<body>
<div id="navigation"> <!-- fallback navigation --> </div>
<?php include '_page.php'; ?>
<div id="footer">Blah blah blah</div>
</body>
You would do something on the server to deliver the next page.
<div class="page">
<p>I am a page <?php echo $_GET['page']; ?></p>
</div>
var lazy = new LazyPagination(document,{
url: '_page.php',
method: 'get',
maxRequests: 20,
buffer: 1000,
data: {
page: 2 // the first "next page" to request
},
pageDataIndex: 'page', // variable in `data` that holds the page number to request
navigation: 'navigation', // will destroy `navigation` if javascript is enabled
inject: {
element: 'footer',
where: 'before' // will inject pages above the footer
}
});
var myLazyPagination = new LazyPagination(element, options);
page) The index name in your data options object that contains the page number to request.element.inject, accepts element and where values. i.e. inject: {element: 'footer', where: 'before'}By default the data option is as follows:
data: { 'page': 2 }
page=2 for the first request and increments from there, assuming you are already displaying page 1.'page': 2 in your data object.increment method, or use LazyPagination.implement({ increment: fn });Attaches the scroll event to the element and resize event to the window.
myLazyPagination.attach();
This LazyPagination instance.
Detaches the scroll event from the element and resize event from the window.
myLazyPagination.detach();
This LazyPagination instance.