jquery mobile在页面加载时添加加载中效果
2016-11-18 14:39
369 查看
<html xmlns="http://www.w3.org/1999/xhtml"> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>验证加载顺序</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.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)如果网速足够快,两个图片瞬间加载完成,有可能看不到明显的加载器显示和关闭的过程。
引用:http://www.cnblogs.com/hiflora/p/4269408.html
相关文章推荐
- jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
- jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
- anjularJs 添加页面加载动态效果
- 三种方式实现自定义圆形页面加载中效果的进度条
- 实现页面加载效果
- asp.net(c#)页面加载时添加控件的属性和回车问题
- 页面加入_JS,CSS使用,#include添加文件,缓存页面,页面间传递汉字,IsPostBack控制页面的加载,自定义错语页面
- asp.net(c#)页面加载时添加控件的属性和回车问题
- Asp.net"页面加载中"效果实现
- 如何让一副图片在页面加载完成时候出现移动翻转和淡入的效果?
- 在页面加载时使用thickbox的遮罩效果。
- Asp.net"页面加载中"效果实现
- 一个比较帅的页面加载效果!
- 今天学习“Asp.net"页面加载中"效果实现”遇到的问题
- 仿 Google Reader 随滚动条滚动加载页面效果
- [转]Asp.net"页面加载中"效果实现
- 很实用的页面加载LOADING效果
- 输出带有是/否的对话框,实现效果是:点击是,继续添加内容,点击否,返回自己定义的页面
- Asp.net"页面加载中"效果实现
- ASP.NET页面加载中效果实现