$(document).ready() 、 $('#id').load() 、window.onload 的区别
今天做项目的时候遇到一个问题,结果死在了$(document).ready()、 $('#id').load() 、window.onload的区别上。然后,就整理一下,这三者的区别。
参考文章:http://www.jb51.net/article/21628.htm http://www.frontopen.com/900.html http://blog.csdn.net/leobig/article/details/40737941
先说$(document).ready()和window.onload的区别
jQuery中的ready特指“DOM”全部加载完毕,也就是说,只要DOM加载完毕了,这个事件自然被触发了。
所谓“DOM”加载完毕指整个页面的标签部分全部加载完毕,至于说某些标签内部可能还存在着一系列事件未完成(譬如img标签可能加载远处一个很大的bmp图片尚未加载完毕等情况)则被忽略。因此对于单纯设置某些Html标签的事件或者属性的绑定而言,在ready方法中显然比load更为适合
load必须等到全部的标签都处于完成状态,包括img把图片全部加载完毕为止)。
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
window.onload和$('#id').load() 是类似的
ready事件:
ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来,JS代码一样可以执行。
load事件:
load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话,则就会出现这种情况:网页文档已经呈现出来,但由于网页数据还没有完全加载完毕,导致load事件不能够即时被触发。
总结:
相信大家已经了解了ready与load的区别,其实如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的,但是页面中有文件就不一样了,所以还是推荐大家在工作中用ready。
另外值得注意的是:
$(document).load是错误的,因为“load”并不是document对象的一个内置的方法;如果要人为为某个标签对象增加一个自定义事件,在jQuery中你只能使用bind方法增加一个自定义的事件,然后必须使用trigger去人为触发这个自定义事件。
随机推荐
- Spark生态
- [置顶] 解成电OJ1003真实的谎言的记录
原题目 Description N个人做一个游戏,游戏中每个人说了一句话(可能是真的也可能是假的) 第i个人说:“N个人中有至少有ai个,至多有bi个人说的是真话!”(i = 1, 2, 3….. ...
- UI基础 获取当前屏幕显示的viewcontroller
#pragma mark - 获取当前屏幕显示的viewcontroller - (UIViewController *)getCurrentVC { UIViewController *result ...
- 从最近MySQL的优化工作想到的
最近决定将以前同事写的存储过程查看一遍,寻找一些代码上写的不太好的地方,争取进行修改以后让这些过程达到一个很好的运行速度.下面是遇到的最多的几个问题. 我遇到了这样的一个SQL: select nam ...
- [开心IT面试题] realloc用法
C++面试题中另一个大板块——内存管理,主要有malloc(free).new(delete).calloc.realloc等.今天来说说realloc的用法. 1.头文件 #include < ...
- Vim Skills——Windows利用Vundle和Github进行Vim配置和插件的同步
OS:Windows Vim安装完成之后,目录如下 vim73:vim运行时所需的文件,对应目录为$VIMRUNTIME变量 vimfiles:第三方的文件,对应目录为$VIM/vimfiles _v ...
- 剑指OFFER之树的子结构(九度OJ1520)
题目描述: 输入两颗二叉树A,B,判断B是不是A的子结构. 输入: 输入可能包含多个测试样例,输入以EOF结束.对于每个测试案例,输入的第一行一个整数n,m(1<=n<=1000,1< ...
- js获取上传文件内容(未完待续)
js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...
- Android设计模式系列--工厂方法模式
工厂方法模式,往往是设计模式初学者入门的模式,的确,有人称之为最为典型最具启发效果的模式.android中用到了太多的工厂类,其中有用工厂方法模式的,当然也有很多工厂并不是使用工厂方法模式的,只是工具 ...
- 【07】为多态基类声明virtual析构方法
1.考虑下面的需要,需要一个工厂方法.工厂方法的规则是:在堆上分配一个子类对象,并返回父类指针.使用完毕,delete父类指针.如果父类的析构方法不是virtual,将直接调用父类的析构方法,导致局部 ...