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

 <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. [Linux] Nginx networking 403 Forbidden 静态文件不允许查看

    nginx 的 403 Forbidden errors 表示你在请求一个资源文件但是nginx不允许你查看. 403 Forbidden 只是一个HTTP状态码,像404,200一样不是技术上的错误 ...

  2. JS验证码

    1.引用jquery 2.Html页面 <div> <canvas id="canvas" style="cursor: pointer; height ...

  3. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  4. Swift 语法

    三目运算        let p=10         let x:Int? =  12         let  m:Optional = 11         print(x!+p+m!)   ...

  5. jquery.Huploadify 上传

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  6. sql-将字符串按指定字符分割插入指定表中

    CREATE PROC SPLIT( @STR VARCHAR(MAX), --截取字符串 ), --截取字符 ) --存放表名 ) AS BEGIN ) IF(OBJECT_ID(@TABLE) I ...

  7. Overload和Override的区别

    Overload:重载 |- 在一个类中定义的若干方法 |- 所有的方法名相同,但参数类型或个数不同 |- 只有参数有关,与返回类型无关 Override:覆写 |- 在继承的关系中 |- 子类定义了 ...

  8. Java项目JUnit简单使用

    前面自己写了一个计算器,准备用在项目里 http://www.cnblogs.com/blog5277/p/5707304.html 由于项目是用户计算跟钱有关的,所以这可不敢出BUG 于是就用了JU ...

  9. 此数据库文件与当前sql server实例不兼容

    在vs2015导入mdf数据库文件时提示:此数据库文件与当前sql server实例不兼容. mdf文件的版本是SQL SERVER 2005的,而VS2015自带的数据库是LocalDB,直接导入该 ...

  10. GitHub 用到的英语

    1.Github首页Pull requests   Issues Gist请求 问题 要点Learn Git and GitHub without any code!没有任何代码学习Git和GitHu ...