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

 <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. windows+caffe(七)——ComputeImageMean.bat

    1.首先我们使用lmdb数据格式(怎样得到lmdb数据格式,看我的另一篇)求得均值: 新建ComputeImageMean.bat,里面输入: D:/deeptools/caffe-windows-m ...

  2. Java经典兔子问题

    题目:古典问题:3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 分析:首先我们要明白题目的意思指的是每个月的兔子总对数:假设将兔子分为小 ...

  3. jQuery的deferred对象学习

    #copy { background-color: lightgreen; padding: 15px; margin: 10px } 一.deferred对象简介 deferred对象是jquery ...

  4. Netty系列之Netty高性能之道

    转载自http://www.infoq.com/cn/articles/netty-high-performance 1. 背景 1.1. 惊人的性能数据 最近一个圈内朋友通过私信告诉我,通过使用Ne ...

  5. 小识Tableau

    关于 Tableau Tableau 帮助人们将数据转化为可以付诸行动的见解.探索无所不能的可视化分析.只需点击几下即可构建仪表板,进行即兴分析. Tableau与R对比: 1.从开发的角度讲,Tab ...

  6. GOLANG 变量

    语法格式 var    变量名    类型   类型:        可以是go语言内置的各种基本数据类型.复合数据类型,甚至是函数.方法.接口以及自定义类型. 声明变量会给变量设定零值.数值类型变量 ...

  7. Java中的四舍五入

    经典案例分析:public class RoundTest {    public static void main(String[] args) {        System.err.printl ...

  8. ASP.NET中cookie与Fiter实现简单登陆,AllowAnonymous匿名登陆

    向服务器发送cookie 在登陆的时候,我们可以可以通过下列代码,向服务器发送cookie,其中包括自己的账号信息(不涉及加密),用以后面判断访问者. HttpCookie cookie = new ...

  9. PHP 编译安装

    1, 获取源码wget -O php.tar.gz http://am1.php.net/get/php-5.6.27.tar.gz/from/this/mirrortar zxvf php.tar. ...

  10. 用pecl/pear独立编译PHP扩展 vs. 把扩展编译到PHP内核中

    将扩展编译到php内部的方式会提高php运行扩展的效率,但是每次需要新添加扩展时都需要把php以及之前添加的所有扩展重新编译一边,非常麻烦. 独立编译扩展,php外部调用扩展的方式虽然会牺牲一点点的性 ...