jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行挨次比较_

1、jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行挨次比较_ 想要添加这个效果，先来弄明白页面的加载和大事执行挨次，看这个简洁例子： html xmlns=l 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 r

2、el=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=l 执行结果：9行14行11行，9行代码放置的上下位置不同，结果依旧是一样的。弄明白上

3、面的挨次之后，假如想让页面在加载之前显示jquery mobile的加载器，然后等页面数据恳求执行完，图片等多媒体加载完之后，再关闭加载器的话，就可以根据以下思路来解决： html xmlns=l 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

4、/ 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, /是否只显示文字 htm

5、l: /要显示的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=l 说明： 1）9行的代码要稍作延迟执行，否则有可能上面引用的js文件还没有加载完，这时候调用showLoader方法，是无法正确执行，就不能显示加载器 2）关闭加载器可以放在document.ready或者window.onload中，具体看页面的执行状况需要。 3）假如网速足够快，两个图片瞬间加载完成，有可能看不到明显的加载器显示和关闭的过程