<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方法，是無法正确執行，就不能顯示加載器
可以放在document.ready或者window.onload中，具體看頁面的執行情況需要。
3）如果網速足夠快，兩個圖檔瞬間加載完成，有可能看不到明顯的加載器顯示和關閉的過程。
![jQuery實作百度搜尋框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)