$(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
随机推荐
- 自己用反射写的一个request.getParameter工具类
适用范围:当我们在jsp页面需要接收很多值的时候,如果用request.getParameter(属性名)一个一个写的话那就太麻烦了,于是我想是 否能用反射写个工具类来简化这样的代码,经过1个小时的代 ...
- Data Flow ->> Term Extraction
中文意思是关键词抽取,用于计算在文本中哪些词汇或者词组出现的频率最高.其实算法有两张:1)Frequency 2)TFIDF TFIDF的全称是Term Frequency and Inverse D ...
- Windows下搭建Android开发环境
1.下载eclipse google eclipse,到官网去下载最新版的,推荐java ee版本的,当然你要用android版本或者standard也无妨 2.下载android sdk,安装相关的 ...
- LaTeX新人教程，30分钟从完全陌生到基本入门
by Nan 对于真心渴望迅速上手LaTeX的人,前言部分可以跳过不看. 本教程面向对LaTeX完全无认知无基础的新人.旨在让新人能够用最简单快捷的方式,轻松入门,能够迅速使用LaTeX完成基本的文本 ...
- linux下c程序调用reboot函数实现直接重启【转】
转自:http://www.blog.chinaunix.net/uid-20564848-id-73878.html linux下c程序调用reboot函数实现直接重启 当然你也可以直接调用syst ...
- Oracle —— 函数 length() 和 lengthb() 的区别
先看看几个例子: select length('Oracle') from dual 结果:6 select lengthb('Oracle') from dual 结果:6 select lengt ...
- Android Socket 聊天室示例
服务端: package com.test.chatServer; import java.io.IOException; import java.net.ServerSocket; import j ...
- Mtk Android编译命令
一.输入命令: cbk@YCS:~/work/k6/alps$ ./mk help Usage: (makeMtk|mk) [options] project actions [modules] Op ...
- lightOJ 1366 Pair of Touching Circles（统计矩形内相切圆对）
题目链接:http://lightoj.com/volume_showproblem.php?problem=1366 题意:给出一个矩形,在内部画两个圆A和B使得AB都完全在矩形内且AB相切且AB的 ...
- oracle教程:PLSQL常用方法汇总
oracle教程:PLSQL常用方法汇总 在SQLPLUS下,实现中-英字符集转换alter session set nls_language='AMERICAN';alter session set ...