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

随机推荐

sql查询字段值的换行及回车符
SQL的换行.回车符,在MySQL.SQL Server和Oracle中均有不同,下面以列表显示. MySQL SQL Server Oracle 换行符 \n或\r\n或CHAR(10) CHA ...
BeautifulSoup 安装使用
Linux环境 1. 安装方法一: 下载:http://www.crummy.com/software/BeautifulSoup/bs4/download/4.2/ 解压:tar -xzvf be ...
总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作
一.Iframe 篇 //&&&&&&&&&&&&&&&&&&a ...
HDU 4648 Magic Pen 6 思路
官方题解: 题意转化一下就是: 给出一列数a[1]...a[n],求长度最长的一段连续的数,使得这些数的和能被M整除. 分析: 设这列数前i项和为s[i], 则一段连续的数的和 a[i]+a[i+1] ...
c# 获取字符串数组中最长的的字符串并输出最长的字符串
求字符串数组中最大长度的字符串: 实质就是比较字符串的长度: 方案一: class Program { static void Main(string[] args) { string[] array ...
每天一个小算法（Shell sort5）
希尔排序的关键在于步长的选取. 希尔排序的复杂度比较复杂,主要跟步长的选择有关,大概是 O(n logn^2),一般认为就是介于 O(n^2) 和 O(n logn) 之间.最好步长比较复杂,一般第一 ...
HibernateTools的使用
1. 到 Hibernate.org官网上下载最新版的 Hibernate Tools,我用的是 HibernateTools-3.2.4.GA版 2. 将下载下来的压缩包解压缩,里面会有 plu ...
java生成带html样式的word文件
参考:http://blog.csdn.net/xiexl/article/details/6652230 最近在项目中需要将通过富文本编辑器处理过的文字转换为Word,查了很久,大家通常的解决办法是 ...
[ionic开源项目教程] - 第14讲 ionic解决跨域问题
[ionic开源项目教程] 第14讲使用jsonp解决跨域问题相信很多朋友在开发中都会遇到以下这个问题. No 'Access-Control-Allow-Origin' header is pr ...

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

随机推荐

热门专题