$(document).ready()并不靠谱

好多用过jQuery的朋友都为jQuery的强大功能和易用性折服，有了jQuery菜鸟也能做javascript特效，有了jQuery高手写代码的效率会进一步提升。

学习jQuery的第一课就是学会在编辑器里敲上$(document),ready()，然后把所有要做的操作写在这个方法下，因为如果不这么写的话我们就可能看不到代码发挥的效果，这是因为我们所操作的元素还没来得及加载到页面就执行了操作。

$(document),ready()可能会不好用，有时候第一次访问页面的时候这个方法下的操作并没有执行，需要刷新一次才会看到效果，这是为什么呢？

其实虽然看似$(document),ready()与body的load属性以及页面的window.load功能一样，但其实还是有差别的，我们用代码做一个测试：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

     <head>

         <title> New Document </title>

         <script type="text/javascript" src="./jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>

         <script type="text/javascript">

             var time=(new Date()).valueOf();

             window.onload=hehe('window.onload');

             hehe('head top');

             function hehe(str){

                 console.log((new Date()).valueOf()-time+'ms\t\t'+$('img').css('width')+'\t\t'+str);

             }

             $(document).ready(function(){

                 hehe('head $(document).ready()');

             });

             hehe('head buttom');

         </script>

     </head>

     <body onload="hehe('body onload')">

         <script type="text/javascript">

             hehe('body top');

             $(document).ready(function(){

                 hehe('body $(document).ready() over');

             });

         </script>

         <img src="http://f1.bj.anqu.com/orgin/ZTgyYQ%3D%3D/allimg/120615/29-120615142929.jpg?"+(new Date()).valueOf()

             onload="hehe('img onload')">

         <script type="text/javascript">

             $(document).ready(function(){

                 hehe('body $(document).ready() under');

             });

             hehe('body buttom');

         </script>

     </body>

 </html>

得到的效果如下：

如图片中，console输出如下：

 0ms        undefined        window.onload

 5ms        undefined        head top

 6ms        undefined        head buttom

 7ms        undefined        body top

 8ms        0px              body buttom

 17ms       0px              head $(document).ready()

 18ms       0px              body $(document).ready() over

 18ms       0px              body $(document).ready() under

 313ms      1920px           img onload

 314ms      1920px           body onload

这个结果虽然不足够说明所有情况，但是至少足够说明三点：

1.head中的内容执行（或被调用）的时候可能body中的内容并没有加载完。

2.$(document).ready()方法无论放在哪里，执行时机都是页面内容基本加载完毕，但图片等资源还没有开始下载的时候。

3.body的onload属性所赋方法是在整个页面所有元素均下载和显示完毕后执行的。

所以如果我们想在页面打开后现实一些如改变图片大小之类的效果的话，就只能在图片的onload属性或者body的onload属性中调用，否则图片还没有完全加载显示就对图片进行操作往往是无效的。

本文章系受著作权法保护,未经著作人同意,不得盗用；使用或引用本文章内容请注明作者名、原地址：书中叶http://www.cnblogs.com/libook

随机推荐

RHEL7-使用Apache服务部署静态网站
1. 安装Apache服务程序 1.1 在虚拟机中选中光盘镜像,并设置连接 1.2 将光盘设备挂载到/media/cdrom目录 [root@localhost ~]# mkdir -p /media ...
WebService另一种轻量级实现—Hessian 学习笔记
最近和同事聊天,得知他们在使用一种叫做Hessian的WebService实现方式实现远程方法调用,是轻量级的,不依赖JavaEE容器,同时也是二进制数据格式传输,效率比SOAP的XML方式要高.感 ...
Initialization and Class loading - Java
可以说,类的代码在初次使用时才加载.这通常指加载发生于创建类的第一个对象之时,但当访问 static域或static方法时,也会发生加载(通过下面的这段代码验证). class LoadTest { ...
jmeter之配置文件介绍
jmeter.bat, jmeter.properties在installpath/bin目录下 jmeter.bat文件包含如下内容: set HEAP=-Xms512m(初始化堆内存大小) -Xm ...
360每日自动签到,领取积分 (java httpclient4.x)
如何登陆360,并每日自动签到这次的难点主要集中在登陆这里了,开始抓包发现360登陆验证很麻烦,但是后来发现一个简单的方法.因为我安装了360安全卫士,发现点击那个金币的按钮能直接验证登陆,哈哈~所以 ...
总结Allegro元件封装(焊盘)制作方法[修整]
总结Allegro元件封装(焊盘)制作方法在Allegro系统中,建立一个零件(Symbol)之前,必须先建立零件的管脚(Pin).元件封装大体上分两种,表贴和直插.针对不同的封装,需要制作不同的P ...
MVC用户登陆验证及权限检查（Form认证）
1.配置Web.conf,使用Form认证方式 <system.web> <authentication mode="None" /> ...
Qt之等待提示框（QMovie）
简述关于gif的使用在实际项目中我用的并不多,因为我感觉瑕疵挺多的,很多时候锯齿比较严重,当然与图存在很大的关系. 关于生成gif的方法可以提供一个网站preloaders,基本是可以满足需求的. ...
zoo.cfg配置
zookeeper的默认配置文件为zookeeper/conf/zoo_sample.cfg,需要将其修改为zoo.cfg.其中各配置项的含义,解释如下: 1.tickTime:CS通信心跳时间 Zo ...
android 中解析XML的方法(转)
在XML解析和使用原始XML资源中都涉及过对XML的解析,之前使用的是 DOM4J和 XmlResourceParser 来解析的.本文中将使用XmlPullParser来解析,分别解析不同复杂度的t ...

$(document).ready()并不靠谱

随机推荐

热门专题