想要添加這個效果，先來弄明白頁面的加載和事件執行順序，看這個簡單例子：
<html xmlns="http://www.w3.org/1999/xhtml"><head ><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>驗證加載順序</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還沒加載"); 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>執行結果：9行>14行>11行，9行代碼放置的上下位置不同，結果依然是一樣的。弄明白上面的順序之后，如果想讓頁面在加載之前顯示jquery mobile的加載器，然后等頁面數據請求執行完，圖片等多媒體加載完之后，再關閉加載器的話，就可以按照以下思路來解決：
<html xmlns="http://www.w3.org/1999/xhtml"><head ><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>驗證加載順序</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);//這里要延遲一下，直接調用無法顯示加載器//顯示加載器.for jQuery Mobile 1.2.0 function showLoader() {$.mobile.loading('show', {text: '正在登陸...', //加載器中顯示的文字 textVisible: true, //是否顯示文字 theme: 'a', //加載器主題樣式a-e textonly: false, //是否只顯示文字 html: "" //要顯示的html內容，如圖片等 });}//隱藏加載器.for jQuery Mobile 1.2.0 function hideLoader() {$.mobile.loading('hide');}window.onload = function () { hideLoader();//setTimeout('hideLoader()', 5000);//延遲5秒，模擬圖片和多媒體加載耗時}$(document).ready(function () { //setTimeout('hideLoader()', 5000);//延遲5秒，模擬頁面請求數據耗時，ajax異步請求等放在這里})</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>說明：
1）9行的代碼要稍作延遲執行，否則有可能上面引用的js文件還沒有加載完，這時候調用showLoader方法，是無法正確執行，就不能顯示加載器
2）關閉加載器可以放在document.ready或者window.onload中，具體看頁面的執行情況需要。
3）如果網速足夠快，兩個圖片瞬間加載完成，有可能看不到明顯的加載器顯示和關閉的過程。
以上所述是小編給大家介紹的jQuery mobile在頁面加載時添加加載中效果 document.ready 和window.onload執行順序比較 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
