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

 <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. C#中static关键字的作用

    静态分配有两种情况:1.用在类里的属性.方法前面,这样的静态属性与方法不需要创建实例就能访问,通过类名或对象名都能访问它,静态属性.方法只有"一份":即如果一个类新建有N个对象,这 ...

  2. YTU 3027: 哈夫曼编码

    原文链接:https://www.dreamwings.cn/ytu3027/2899.html 3027: 哈夫曼编码 时间限制: 1 Sec  内存限制: 128 MB 提交: 2  解决: 2 ...

  3. Web Api 简介

    ASP.NET Web API 简介  ASP.NET MVC 4 包含了 ASP.NET Web API, 这是一个创建可以连接包括浏览器.移动设备等多种客户端的 Http 服务的新框架, ASP. ...

  4. NOIP 2014 Day2 T1 无线网络发射器

    #include<iostream> #include<cmath> #include<cstdlib> #include<cstdio> #inclu ...

  5. [mysql]throw exception

    CREATE PROCEDURE pro_throwException (errorCode char(5), errorMessage text) BEGIN SIGNAL SQLSTATE err ...

  6. 定时备份SQL SERVER的数据库并且把备份文件复制到另外一台服务器

    需求介绍:每天备份线上正式库并且把备份文件复制到测试服务器,测试服务器自动把数据库备份文件还原. 方案介绍: 第1步:在正式库上创建存储过程用来备份数据库和复制到测试服务器,然后新建作业每天定时执行创 ...

  7. 如何输出function执行的语句

    SQL>  set serveroutput on;SQL> exec dbms_output.put_line(1); set   serveroutput   on   size   ...

  8. git简单命令

    1. git status(不代参数) -- 查看本地修改过的文件 git status -s (简洁) 2. git add  -- 添加到暂存区 3. git commit -m '提交的mess ...

  9. ATS

    一) 起因:由于苹果规定2017年1月1日以后,所有APP都要使用HTTPS进行网络请求. 之前,可以在Info.plist中禁用ATS功能,按如下设置即可. <key>NSAppTran ...

  10. EXCLE使用中常用函数和公式

    1.查找重复项 IF(COUNTIF(A:A,A1)>1"重复""") 或者 IF(COUNTIF($A$1:$A$100,A1)=1,"&qu ...