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 相关文章推荐
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
JS的get和set使用示例
Feb 20 Javascript
手机号码,密码正则验证
Sep 04 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
js select实现省市区联动选择
Apr 17 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 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
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
小程序实现短信登录倒计时
2019/07/12 Javascript
原生JS实现天气预报
2020/06/16 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
Python线程的两种编程方式
2015/04/14 Python
python编程嵌套函数实例代码
2018/02/11 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
材料化学应届生求职信
2013/10/09 职场文书
初二生物教学反思
2014/02/03 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
Python实现byte转integer
2021/06/03 Python
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL