Xiaoqiang's HTML5 mobile development path (50) -- jquerymobile page initialization process

To facilitate the description and more intuitive display of the page initialization process of jquerymobile and the triggering process of each event, I drew a flowchart:

In the figure, the events in the interface are circled in red. The test code is as follows:

Exercise
 
 
 <Script src = "js/jquery-1.6.4.js" type = "text/javascript"> </script> <script src = "js/jquery. mobile-1.0.1.js "type =" text/javascript "> </script> <script> $ (document ). ready (function (e) {alert ("document. ready is triggered ");}); $ (document ). live ("mobileinit", function () {alert ("mobileinit event triggered") ;}); $ (document ). delegate ("# page_MobileInit0", "pageinit", function () {alert ("page_MobileInit0 page pageinit event triggered");}); $ (document ). delegate ("# page_MobileInit0", "pageshow", function () {alert ("page_MobileInit0 page pageshow event triggered");}); $ (document ). delegate ("# page_MobileInit1", "pageinit", function () {alert ("page_MobileInit1 page pageinit event triggered");}); $ (document ). delegate ("# page_MobileInit1", "pageshow", function () {alert ("page_MobileInit1 page pageshow event triggered");}); </script>
 
  
   
Page events
  
  
JQuery Mobile Page Initialization is implemented through mobileinit, $ (document). ready (), and pageinit.
Next page of The mobileinit event manually triggered
  

  

 
 
  
   
Page events
  
  
JQuery Mobile Page Initialization is implemented through pageinit
Return
 

In addition to the events described above, there are also onload events. The onload event is triggered when all related content (including images) are loaded. The onload event is triggered late because it is affected by images and other content. Although the onload event is also used in page development, in jQuery Mobile development, it mainly uses three initialization events: mobileinit, ready (), and pageinit.