Page initialization and loading events in jQuery mobile web development _ jquery

This article mainly introduces page initialization and loading events in jQuery mobile web development. It is a basic knowledge in JavaScript mobile page development and learning. For more information, see Page initialization events (pagebeforecreate, pagecreate)
Jquery Mobile automatically initializes some plug-ins Based on the enhanced conventions in page. For example, an input box defines that the type = range attribute will automatically generate a custom slide. These automatic initialization behaviors are controlled by the "page" plug-in. It deploys deployment events before and after execution, allows you to operate pages before and after initialization, or even provides initialization behaviors by yourself, disable Automatic initialization. Note that the following page initialization events are triggered only once on each page, which is the opposite of the show/hide events displayed or hidden on each page.

Pagebeforecreate: triggered before page initialization.

Pagecreate: When the page is initialized, It is triggered after initialization.

$('#aboutPage').live('pagebeforecreate',function(event){alert('This page was just inserted into the dom!');});$('#aboutPage').live('pagecreate',function(event){alert('This page was just enhanced by Jquery Mobile!');});

Note: bind pagebeforecreate and return false. You are not allowed to operate the page plug-in yourself. Additionally, you must bind these functions before Jquery Mobile executes them so that they can be called during page loading initialization. You can use them in the mobileinit event processing functions.

Page loading events (pagebeforeload, pageload)
When an external page is loaded to the dom, two events are triggered. The first is pagebeforeload, the second is pageload, or pageloadfailed.

Pagebeforeload

Triggered before the loading request is sent. The callback function bound to this event can call preventDefault () to handle the loading request. In this case, the callback function must call resolve () or reject () on the object that is passed to the callback function through the data object (). The object uploaded to the callback function through the second parameter contains the following attributes:

• Url (string): the absolute or relative address that is passed to $. mobile. loadPage () through callback.
• AbsUrl (string): the absolute address version of the url.
• DataUrl (string): version of the absolute address that is used to filter when the page is identified or when the browser address is updated
• Deferred (object): The callback function that calls preventDefault () for this event must be called for this event
• The resolve () or reject () method restores the changePage () request.

For example:

$ (Document ). bind ("pagebeforeload", function (event, data) {// Let the jqm framework know that we will handle the load event. event. preventDefault ();//... load the document and insert it into the DOM // In this callback, or use other asynchronous loading methods, // call resolve and transfer it to the following parameters, add a // jquery selector containing page dom elements. Data. deferred. resolve (data. absUrl, data. options, page );});

Pageload

Triggered after the page is successfully loaded and inserted to the DOM. The callback function bound to this event is used as a data object as the second parameter. This object contains the following information:

• Url (string): the url.
• AbsUrl (string): the absolute address version of the url.