jQuery Mobile pageinit 事件

The pageinit event is a jQuery Mobile event triggered when a new page is initialized with jQuery Mobile. This event is triggered only once per page, after the page markup is loaded into the DOM, enhanced with jQuery Mobile widgets, and styled with jQuery Mobile's CSS framework.

Syntax

The pageinit event can be bound to a page using the following syntax:

$(document).on('pageinit', '#page-id', function(){
  // code to be executed when the page is initialized
});

Here, #page-id is the ID of the page to which the event is bound. The code inside the function will be executed when the page is initialized with jQuery Mobile.

Examples

Example 1: Show a loading spinner

You can show a loading spinner while the page is being initialized using the following code:

$(document).on('pageinit', function(){
  $.mobile.loading('show');
});

Example 2: Initialize a plugin

You can initialize a plugin for a specific page using the pageinit event. For example, let's say you have a page with an ID of #gallery-page and you want to initialize the Swipebox plugin for all images on this page. You can do this using the following code:

$(document).on('pageinit', '#gallery-page', function(){
  $('.swipebox').swipebox();
});

Here, .swipebox is the class of the images to which the Swipebox plugin will be applied.

Conclusion

The pageinit event is a useful jQuery Mobile event that is triggered when a new page is initialized with jQuery Mobile. You can use this event to execute code when the page is initialized, such as showing a loading spinner or initializing a plugin.