$(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

随机推荐

chrome开发配置(四)生成项目及配置库引用
1.运行gclient runhooks --force .会重新下载个python 2.7版本的,并且下载好几个文件,大概1个多小时:
从WeUI学习到的知识点
WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Ic ...
关于JavaScript的思考
像apply这种函数,只有动态语言才能完成,动态语言既编译器/解释器这类代码生成器完成自己职责时只能在运行时完成,例如函数参数的压栈.仔细想想可能不对,也可以通过编译来完成 apply和call的使用 ...
HDU 4647 Another Graph Game 思路+贪心
官方题解: 若没有边权,则对点权从大到小排序即可.. 考虑边,将边权拆成两半加到它所关联的两个点的点权中即可. ..因为当两个人分别选择不同的点时,这一权值将互相抵消. #include <cs ...
360每日自动签到,领取积分 (java httpclient4.x)
如何登陆360,并每日自动签到这次的难点主要集中在登陆这里了,开始抓包发现360登陆验证很麻烦,但是后来发现一个简单的方法.因为我安装了360安全卫士,发现点击那个金币的按钮能直接验证登陆,哈哈~所以 ...
hdu 1829-A Bug's LIfe(简单带权并查集)
题意:Bug有两种性别,异性之间才交往, 让你根据数据判断是否存在同性恋,输入有 t 组数据,每组数据给出bug数量n, 和关系数m, 以下m行给出相交往的一对Bug编号 a, b.只需要判断有没有, ...
RSA (cryptosystem)
https://en.wikipedia.org/wiki/RSA_(cryptosystem) RSA is one of the first practical实用性的 public-key cr ...
《OD学hadoop》mac下使用VMware Fusion安装centos
一. NAT模式网络访问 (1)在linux中输入命令ifconfig查看网络信息 (2)在mac中输入命令ifconfig查看网络信息 lo0: flags=<UP,LOOPBACK,RUNN ...
java线程安全理解
java线程安全理解如果你的代码所在的进程中有多个线程在同时运行,而这些线程可能会同时运行这段代码.如果每次运行结果和单线程运行的结果是一样的,而且其他的变量的值也和预期的是一样的,就是线程安全的. ...
c#调用系统资源大集合-1
using System; using System.Collections.Generic; using System.Text; using System.Runtime.InteropServi ...

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

随机推荐

热门专题