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

随机推荐

gearman安装及初次使用
官网: http://gearman.org/ 一篇文章: 利用Gearman实现异步任务处理一.问题分析问题:在性能测试过程中,发现用户管理平台在进行图片上传时,性能不佳. 分析:经过代码分析 ...
javascript 网络是否连接的几种方案
js 网络是否连接的几种方案 1.通过html5的新属性: window.onload = function () { var isOnLine = navigator.on ...
log log4net用代码记录日志
log4net 用代码记录日志今天在开发项目的时候,遇到跨域调用log4net中的类,出现了一个bug,提示LogImpl未标记可序列化,此时,我靠,麻烦了,这个类又不是咱们自己的,改源码我想应该 ...
Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(二)
然后是项目下的文件:完整的项目请看上一篇 Maven+Spring+Hibernate+Shiro+Mysql简单的demo框架(一) 项目下的springmvc-servlet.xml配置文件: ...
BZOJ 1047 理想的正方形(单调队列)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1047 题意:给出一个n*m的矩阵.在所有K*K的子矩阵中,最大最小差值最小的是多少? 思 ...
leetcode：Multiply Strings
Given two numbers represented as strings, return multiplication of the numbers as a string. Note: Th ...
Android 用户界面---拖放（Drag and Drop）（一）
用Android的拖放框架,能够允许用户使用图形化的拖放手势,把数据从当前布局中的一个View对象中移到另一个View对象中.这个框架包括:拖拽事件类.拖拽监听器.以及辅助的方法和类. 尽管这个框架主 ...
Kafka的Producer和Consumer源码学习
先解释下两个概念: high watermark (HW) 它表示已经被commited的最后一个message offset(所谓commited, 应该是ISR中所有replica都已写入),HW ...
JS Array常用方法indexOf/filter/forEach/map/reduce详解
Array共有九个方法 Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.protot ...
UIView的user Interaction Enabled属性
A Boolean value that determines whether user events are ignored and removed from the event queue. 译: ...

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

随机推荐

热门专题