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

随机推荐

MyBatis学习总结_08_Mybatis3.x与Spring4.x整合
一.搭建开发环境 1.1.使用Maven创建Web项目执行如下命令: mvn archetype:create -DgroupId=me.gacl -DartifactId=spring4-myba ...
Android百度地图开发04之POI检索
POI检索 POI~~~ Point of Interest,翻译过来就是“兴趣点”.我们在使用地图的时候,搜索周边的ktv,饭店,或者宾馆的时候,输入关键字,然后地图展示给我们很多个点, 这些点就是 ...
webServer xampp的安装及使用
一.下载: 西装xampp1.73版本,其他版本可能会出错,为了你能顺利安装,最好用此版本: 二.安装: 1.安装路径,最好不要放到系统盘去[c:],建议非系统盘都可,尤其是早期的XAMPP版本可能默 ...
js获取项目根路径
//js获取项目根路径,如: http://localhost:8083/uimcardprj function getRootPath(){ //获取当前网址,如: http://localhost ...
使用Gson解析复杂的json数据
Gson解析复杂的json数据最近在给公司做一个直播APK的项目,主要就是通过解析网络服务器上的json数据,然后将频道地址下载下来再调用Android的播放器进行播放,原先本来打算使用普通的jso ...
Android Touch(1)事件的传递流程(*)
1,Activity,ViewGroup,View的关系 2,触摸事件 3,传递事件时的重要函数 4,事件传递流程参考图 5,其它参考资料 1,Activity,ViewGroup,View的关系本 ...
JAVA使用JNI调用C++动态链接库
JAVA使用JNI调用C++动态链接库使用JNI连接DLL动态链接库,并调用其中的函数首先 C++中写好相关函数,文件名为test.cpp,使用g++编译为DLL文件,指令如下: g++ -sha ...
51nod1204 Parity
如果sm[j]和sm[i]奇偶性相同,那么(i+1,j)个数为偶数如果奇偶性相同看成是朋友,不同的看成是敌人,那么就跟bzoj1370的做法差不多了. 如果奇偶性相同,就将x和y合并,x+n,y+n合 ...
vijos 1379 字符串的展开
23333333333333333 #include<iostream> #include<cstdio> #include<cstring> #include&l ...
BZOJ 4551 树
线段树+标记永久化. #include<iostream> #include<cstdio> #include<cstring> #include<algor ...

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

随机推荐

热门专题