jquery mobile在頁面載入時新增載入中效果
阿新 • • 發佈：2019-01-08
<html xmlns="http://www.w3.org/1999/xhtml"> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>驗證載入順序</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.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）如果網速足夠快，兩個圖片瞬間載入完成，有可能看不到明顯的載入器顯示和關閉的過程。
引用：http://www.cnblogs.com/hiflora/p/4269408.html