Lazyloading (i.e. loading the content as it's needed during a scroll of a listview or similar control) is a great way to optimize the performance of any app that contains a list of 50 or more items. With the LazyLoader Widget for jQuery Mobile, you can
npm install jquery.mobile.lazyloaderLazyloading (i.e. loading the content as it's needed during a scroll of a listview or similar control) is a great way
to optimize the performance of any app that contains a list of 50 or more items. With the LazyLoader Widget for jQuery
Mobile, you can easily lazyload any listview without having to write a bunch of custom code to accomplish it.
Note: This is only the client-side part of the lazyloading solution. It requires a server-side resource that returns a
simple JSON formatted string. Details and examples can be found below.
* Requirements
* Usage
* Filterable
* Server request
* Server response
* Options
* Functions
* loadMore
* reset
* Events
* lazyloaderdoneloading
* lazyloaderalldone
* lazyloaderbeforerender
* lazyloadererror
* Sample
* jQuery (Tested with v2.2.4)
* jQuery Mobile (Tested with v1.4.5)
* Mustache (Tested with v4.2.0)
* Server-side code to handle the AJAX requests
``npm`
$ npm install --save jquery.mobile.lazyloader
Run the following grunt command in case the dist directory doesn't exist:`
$ grunt dist
Include the following files:
`html`
Include a template in the
:
`html
`Add a list and optionally an element that indicates progress is going on:
html
`Initialize the widget with the url to get the data from and the id of the template:
JavaScript
$(function() {
// Initialize the lazyloader widget
$("#myListView").lazyloader({
url: 'http://server.com',
templateId: "user",
$progress: "#myProgress"
});
});
`#### Filterable
If you are using the
widget in combination with this widget, the default behaviour is changed to filtering server side. The searchQuery option is set to the filter input when its content is changed. This will cause the reset function with the modified searchQuery option to be called. You are responsible for applying the filter server-side.#### Server request
The request made out to the server will contain the following data:
- __retrieve__: {number} The number of items to be retrieved.
- __retrieved__: {number} The current number of retrieved items.
- __reset__: {boolean} Whether or not the server data should be reset.
- __searchQuery__: {string|null} The search query to filter with.
#### Server response
The server response is expected to be in a JSON format with the mandatory
items key that must contain an array of objects, each representing a list item to be rendered. `json
{
"items": [
{"name": "John"}
]
}
`$3
Option Default Required Purpose
url
Empty
Yes
This specifies the URL of the server-side resource to which the AJAX post should be sent.
templateId
Empty
Yes
The id of the template used to create list items for the loaded items.
$progress
Empty
No
The selector of the jQuery element that is to be shown or hidden when a request is made.
eventTimeout
100
No
The timeout used before attempting to load more items when it is triggered by either the scrollstart, scrollstop, or wheel event.
searchTimeout
300
No
The timeout used before a request is sent after setting the searchQuery option.
threshold
100
No
This specifies the threshold in pixels for how close to the bottom of the page should the widget get before loading more items.
retrieve
20
No
This specifies how many items should be retrieved with each lazy loading ajax call
retrieved
0
No
This specifies the number of items that are currently loaded
searchQuery
Empty
No
The search query that is posted along in the request. Changing this option will trigger the reset function.
removeDuplicates
true
No
Removes new duplicate items loaded by a load more request. Items within a request are not compared to one another.
ajaxSettings
{
type: "POST"
}
No
The ajax settings to use in the request. The dataType setting cannot be overwritten, it will always be json. The setting defined here take precedence over the deprecated ajaxType and postData options. For instance ajaxType will be overwritten if the ajax setting type is defined.
ajaxType (deprecated)
POST
No
The ajax request type. Can be either GET or POST.
postData (deprecated)
Empty
No
Additional data to be sent in the requests.
$3
#### loadMore
Loads more items.
JavaScript
$("#myListView").lazyloader("loadMore", timeout);
`- __timeout__: {number} The timeout before a request is sent. Defaults to the
option.#### reset
Empties the list, sets the
retrieved option back to 0 and sends a request for more items to the server, while also indicating a reset has been performed.`JavaScript
$("#myListView").lazyloader("reset", timeout);
`- __timeout__: {number} The timeout before a request is sent. Defaults to the
option.$3
The lazyloader triggers several events during certain operations. Here are examples of how to listen for the events:
#### lazyloaderdoneloading
Raised when a request for more items is completed.
`JavaScript
$("#myListView").on("lazyloaderdoneloading", function ( evt, items, data ){ });
`- __evt__: {JQuery.Event} The jQuery event.
- __items__: {Object[]} An array of loaded items.
- __data__: {Object} The complete JSON data returned in the response.
#### lazyloaderskiploading
Raised when loading of items is skipped.
JavaScript
$("#myListView").on("lazyloaderskiploading", function ( evt ){ });
`- __evt__: {JQuery.Event} The jQuery event.
#### lazyloaderalldone
Raised when all items have been loaded. No more requests will be sent after this event has been raised.
JavaScript
$("#myListView").on("lazyloaderalldone", function ( evt ){ });
`- __evt__: {JQuery.Event} The jQuery event.
#### lazyloaderreset
Raised before a reset request is made.
JavaScript
$("#myListView").on("lazyloaderreset", function ( evt ){ });
`- __evt__: {JQuery.Event} The jQuery event.
#### lazyloaderbeforerender
Raised before the loaded items are rendered. This allows you to modify the data before it's rendered in the list.
JavaScript
$("#myListView").on("lazyloaderbeforerender", function ( evt, items, data ){ });
`- __evt__: {JQuery.Event} The jQuery event.
- __items__: {Object[]} An array of loaded items.
- __data__: {Object} The complete JSON data returned in the response.
#### lazyloadererror
Raise when an error occurred with the ajax request or when parsing the result
JavaScript
$("#myListView").on("lazyloadererror", function ( evt, error ){ });
`- __evt__: {JQuery.Event} The jQuery event.
- __error__: {Object} An object containing information about the error that occured.
- __errorCode__: {number} The error code.
_Error codes_
- __1__: An error occurred with the request.
- __2__: An error occurred parsing the response data.
- __3__: The specified template does not exist.
- __errorData__: {*} The data offering more information about the error.
$3
Navigate to the
directory and run the following command in a console to start the server and open the sample page:npm start`