jQuery mobile在頁(yè)面加載時(shí)添加加載中效果 document.ready 和window.onload執(zhí)行順序比較

更新時(shí)間：2016年07月14日 09:56:03 作者：翩翩

這篇文章主要介紹了jQuery mobile在頁(yè)面加載時(shí)添加加載中效果 document.ready 和window.onload執(zhí)行順序比較，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下

想要添加這個(gè)效果，先來(lái)弄明白頁(yè)面的加載和事件執(zhí)行順序，看這個(gè)簡(jiǎn)單例子：

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>驗(yàn)證加載順序</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還沒(méi)加載"); 
window.onload = function () { 
alert('onload，圖片加載完'); 
}
$(document).ready(function () {
alert('ready，dom加載完'); 
}) 
</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>

執(zhí)行結(jié)果：9行>14行>11行，9行代碼放置的上下位置不同，結(jié)果依然是一樣的。弄明白上面的順序之后，如果想讓頁(yè)面在加載之前顯示jquery mobile的加載器，然后等頁(yè)面數(shù)據(jù)請(qǐng)求執(zhí)行完，圖片等多媒體加載完之后，再關(guān)閉加載器的話，就可以按照以下思路來(lái)解決：

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>驗(yàn)證加載順序</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);//這里要延遲一下，直接調(diào)用無(wú)法顯示加載器
//顯示加載器.for jQuery Mobile 1.2.0 
function showLoader() {
$.mobile.loading('show', {
text: '正在登陸...', //加載器中顯示的文字 
textVisible: true, //是否顯示文字 
theme: 'a', //加載器主題樣式a-e 
textonly: false, //是否只顯示文字 
html: "" //要顯示的html內(nèi)容，如圖片等 
});
}
//隱藏加載器.for jQuery Mobile 1.2.0 
function hideLoader() {
$.mobile.loading('hide');
}
window.onload = function () { 
hideLoader();
//setTimeout('hideLoader()', 5000);//延遲5秒，模擬圖片和多媒體加載耗時(shí)
}
$(document).ready(function () { 
//setTimeout('hideLoader()', 5000);//延遲5秒，模擬頁(yè)面請(qǐng)求數(shù)據(jù)耗時(shí)，ajax異步請(qǐng)求等放在這里
})
</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>

說(shuō)明：

1）9行的代碼要稍作延遲執(zhí)行，否則有可能上面引用的js文件還沒(méi)有加載完，這時(shí)候調(diào)用showLoader方法，是無(wú)法正確執(zhí)行，就不能顯示加載器

2）關(guān)閉加載器可以放在document.ready或者window.onload中，具體看頁(yè)面的執(zhí)行情況需要。

3）如果網(wǎng)速足夠快，兩個(gè)圖片瞬間加載完成，有可能看不到明顯的加載器顯示和關(guān)閉的過(guò)程。

以上所述是小編給大家介紹的jQuery mobile在頁(yè)面加載時(shí)添加加載中效果 document.ready 和window.onload執(zhí)行順序比較，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: