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


Posted in Javascript onJuly 14, 2016

想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子:

<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执行顺序比较 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 Javascript
javascript运算符语法全面概述
Jul 14 #Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 #Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 #Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 #Javascript
全面了解addEventListener和on的区别
Jul 14 #Javascript
js计算系统当前日期是星期几的方法
Jul 14 #Javascript
原生javascript 学习之js变量全面了解
Jul 14 #Javascript
You might like
php include的妙用,实现路径加密
2008/07/29 PHP
php实现的漂亮分页方法
2014/04/17 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
jquery查找tr td 示例模拟
2014/05/08 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
理解javascript模块化
2016/03/28 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
js数据类型检测总结
2018/08/05 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
Python正则表达式的使用范例详解
2014/08/08 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
python使用列表的最佳方案
2020/08/12 Python
python 如何实现遗传算法
2020/09/22 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
自荐书封面下载
2013/11/29 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
先进个人材料怎么写
2014/12/30 职场文书