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 相关文章推荐
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
React更新渲染原理深入分析
Dec 24 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
VFP与其他应用程序的集成
2006/10/09 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
linux下python抓屏实现方法
2015/05/22 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
python dumps和loads区别详解
2020/02/04 Python
临床医学专业个人的自我评价
2013/09/27 职场文书
护士自我鉴定
2013/10/23 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
七夕情人节促销方案
2014/06/07 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
舞出我人生观后感
2015/06/16 职场文书
青年志愿者活动感想
2015/08/07 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
区域销售大会开幕词
2016/03/04 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL