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

 <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. apache commons math 示例代码

    apache commons Math是一组偏向科学计算为主的函数,主要是针对线性代数,数学分析,概率和统计等方面. 我虽然是数学专业毕业,当年也是抱着<数学分析>啃,但是好久不用,这些概 ...

  2. 关于yuv与rgb的互转

    来自以下网址:http://stackoverflow.com/questions/9465815/rgb-to-yuv420-algorithm-efficiency #define CLIP(X) ...

  3. lnmp搭建

    一,安装php1,列出php php-fpm是否存在yum list php php-fpm2,安装yum -y install php php-fpm3,启动php-fpm:/etc/init.d/ ...

  4. git使用ssh密钥

    1.查看本地是否有密钥对,如果存在就删除cd ~/.sshid_dsa id_dsa.pub 2.重新生成密钥对ssh-keygen -t rsa -C "your_email@yourem ...

  5. response项目的各个写法

    这个是一个响应式的页面 原文可参照:http://localhost/response/seejs_index.html

  6. 三元运算与lambda表达式

    #三元运算,就是对if else的简写 if 1 == 1: print("jasper") else: print("sb") 三元运算写法 name=&qu ...

  7. Android 进程常驻----native保活5.0以上方案推演过程以及代码

    正文: 上一篇我们通过父子进程间建立双管道,来监听进程死掉,经过测试,无耗电问题,无内存消耗问题,可以在设置中force close下成功拉起,也可以在获取到root权限的360/cleanmaste ...

  8. VS配置路径和宏

    http://blog.csdn.net/puttytree/article/details/7838419

  9. 概率论与数理统计讲课PPT和往年期末试卷

    讲课PPT 第17课:数理统计的基本概念 注 : 我会陆续把讲课PPT放上去,大家可以下载. 往年试卷及解答 往年期末试卷及解答 注 : 供同学们参考以备考.

  10. Qual F&Q

    [1]长按power键,下面有四个选项可以选择户外,静音,振动标准四种模式 GlobalActions.java->createDialog(): if (!mHasVibrator) { mS ...