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

 <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执行顺序比较的更多相关文章

  1. jQuery中$(document).ready()和window.onload的区别？

    document.ready和document.load的区别?(JQ中的$(document).ready()和window.onload的区别?) window.onload,是采用DOM0级事件 ...

  2. 转载jquery $(document).ready() 与window.onload的区别

    jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...

  3. $(document).ready和window.onload,细微小区别,ready是jQuery的方法,onload是window的方法

    $(document).ready和window.onload的区别 $(document).ready和window.onload都是在都是在页面加载完执行的函数,大多数情况下差别不大,但也是有区别 ...

  4. jQuery $(document).ready()和window.onload

    jQuery $(document).ready()和window.onload 根据ready()方法的API说明http://api.jquery.com/ready/. 这个方法接收一个func ...

  5. jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别

    大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...

  6. jQuery的$(window).load与、(document).ready和window.onload的关系

    jQuery的$(window).load与.(document).ready和window.onload的关系 $(function() { console.log('document.ready ...

  7. [Javascript]jquery $(document).ready() 与window.onload的区别

    引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload ...

  8. JS 页面加载触发事件 document.ready和window.onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  9. JS点击任意标签获得该标签属性，以获得ID为例，以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别

    js代码: //$(document).click(function (e) { // 在页面任意位置点击而触发此事件 // var select = ""; // var i = ...

随机推荐

  1. git 远程库命令

    git 常用命令在这里就不在说了,初学者点击http://www.cnblogs.com/Vdiao/p/5267250.html Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器上 ...

  2. MySQL时间段查询

    现实中我们会遇到统计报表.比如查询当月每一天的数据数量...等等之类的.以下内容就是有关这方面的咯. 首先要知道几个函数 mysql> select now(); //这个是显示的当前时间 +- ...

  3. input标签file的value属性IE兼容性问题

    在IE中input标签file的value属性是只读的,不能通过js来改变,如下代码在IE中就是无效的: var input = document.getElementById('file'); in ...

  4. 关于mysql 查询内容不区分大小问题

    问题描述: select * from users where user_name ='user_01' 跟 select * from users where user_name ='uSer_01 ...

  5. 【前端】【转】JS跨域问题总结

    详情见原博客:详解js跨域问题 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源 ...

  6. Redhat、CentOS添加静态路由的标准方法

    我们经常遇到需要在系统默认路由的基础上,额外添加静态路由的需求.为了使得下次系统启动这些静态路由依旧生效,我们可能采取在rc.loal里加入route命令追加静态路由的方法. 现在给大家推荐Redha ...

  7. 3.密码pasuwado————记第一次超越Candy？

    激动人心的2016.11.4模拟赛结束了 更激动人心的是我得了90分,第一次超越豪哥,特立文纪念. 3.密码 [问题描述] 哪里有压迫,哪里就有反抗. moreD的宠物在法庭的帮助下终于反抗了.作为一 ...

  8. JS判断日期是否在同一个星期内，和同一个月内

    今天要用到判断日期是否在同一个星期内和是否在同一个月内,在网上找了好一会儿也没找到合适的,然后自己写了一个方法来处理这个问题,思路就不详细介绍了,直接附上代码,自己测试了一下 没有问题,若有问题请在评 ...

  9. 微信小程序-视图视图引用

    引用 WXML 提供两种文件引用方式import和include. import import可以在该文件中使用目标文件定义的template,如: 在 item.wxml 中定义了一个叫item的t ...

  10. TryUpdateModel

    MSDN参考 https://msdn.microsoft.com/zh-cn/library/system.web.mvc.controller.tryupdatemodel.aspx 相关博文 h ...