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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
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框架Phpbean说明
2008/01/10 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
python实现日常记账本小程序
2018/03/10 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Python如何读写字节数据
2020/08/05 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
什么是方法的重载
2013/06/24 面试题
《望洞庭》教学反思
2014/02/16 职场文书
保健品市场营销方案
2014/03/31 职场文书
我的求职择业计划书
2014/04/04 职场文书
《长相思》听课反思
2014/04/10 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
学校班班通实施方案
2014/06/11 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL