Of Stack

jQuery mobile adds in load effects when the page loads document. ready and window. onload perform sequence comparison

  • 2021-07-02 23:34:29
  • OfStack

To add this effect, first understand the page loading and event execution order. Look at this simple example: 


<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Verify loading order </title>
<script src="../Scripts/jquery-1.7.1.js"></script>
<link href="../Scripts/Mobile/jquery.mobile-1.4.0.min.css" rel="stylesheet" />
<script src="../Scripts/Mobile/jquery.mobile-1.4.0.min.js"></script>
<script>
alert("DOM Not loaded yet "); 
window.onload = function () { 
alert('onload The picture is loaded '); 
}
$(document).ready(function () {
alert('ready , dom Finish loading '); 
}) 
</script>
</head>
<body >
<form id="form1" runat="server"> 
<img src="http://images.aviary.com/imagesv5/feather_default.jpg" />
<img src="http://car0.autoimg.cn/car/upload/2015/1/8/v_20150108092921264345010.jpg" />
</form>
</body>
</html>

Execution result: 9 lines > 14 lines > 11 lines and 9 lines of code are placed in different positions, and the result is still the same. After understanding the above order, if you want the page to display the loader of jquery mobile before loading, and then close the loader after the page data request is executed and the multimedia such as pictures is loaded, you can solve it according to the following ideas: 


<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Verify loading order </title>
<script src="../Scripts/jquery-1.7.1.js"></script>
<link href="../Scripts/Mobile/jquery.mobile-1.4.0.min.css" rel="stylesheet" />
<script src="../Scripts/Mobile/jquery.mobile-1.4.0.min.js"></script>
<script>
setTimeout('showLoader()', 100);// There is a delay here 1 Direct calls fail to display the loader 
// Display loader .for jQuery Mobile 1.2.0 
function showLoader() {
$.mobile.loading('show', {
text: ' Landing in ...', // Text displayed in the loader  
textVisible: true, // Whether to display text  
theme: 'a', // Loader theme style a-e 
textonly: false, // Whether to display only text  
html: "" // To display html Content, such as pictures, etc  
});
}
// Hide loader .for jQuery Mobile 1.2.0 
function hideLoader() {
$.mobile.loading('hide');
}
window.onload = function () { 
hideLoader();
//setTimeout('hideLoader()', 5000);// Delay 5 Seconds, analog pictures and multimedia loading time 
}
$(document).ready(function () { 
//setTimeout('hideLoader()', 5000);// Delay 5 Seconds, simulating the time it takes for the page to request data, ajax Asynchronous requests and so on are placed here 
})
</script>
</head>
<body >
<form id="form1" runat="server"> 
<img src="http://images.aviary.com/imagesv5/feather_default.jpg" />
<img src="http://car0.autoimg.cn/car/upload/2015/1/8/v_20150108092921264345010.jpg" />
</form>
</body>
</html>

Description:

1) 9 lines of code to slightly delay execution, otherwise it is possible that the above referenced js file has not been loaded, at this time call showLoader method, is not correct execution, can not display the loader

2) Shutdown loader can be placed in document. ready or window. onload, depending on the execution of the page.

3) If the network speed is fast enough, the two pictures will be loaded instantly, and the obvious process of loader display and shutdown may not be seen.

Related articles: