$(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去人为触发这个自定义事件。
随机推荐
- Java自定义Annotation,通过反射解析Annotation
创建一个自定义的Annotation import java.lang.annotation.*; import java.lang.reflect.Method; @Documented @Targ ...
- 转载ASP.net 中 OutputCache 指令各个参数的作用
使用@ OutputCache指令 使用@ OutputCache指令,能够实现对页面输出缓存的一般性需要.@ OutputCache指令在ASP.NET页或者页中包含的用户控件的头部声明.这种方式非 ...
- 使用教程sqlite
访问地址: http://www.runoob.com/sqlite/sqlite-where-clause.html
- [转]SpringMVC日期类型转换问题三大处理方法归纳
http://blog.csdn.net/chenleixing/article/details/45190371 前言 我们在SpringMVC开发中,可能遇到比较多的问题就是前台与后台实体类之间日 ...
- PowerShell查询sql server
function Invoke-SQL1: function Invoke-SQL { param( [string] $DBServer, [string] $Database, [string] ...
- 46 关于Linux的I/O重定向
I/O重定向是一个过程,这个过程捕捉一个文件.或命令.或程序.或脚本.甚至代码块(code block)的输出,然后把捕捉到的输出,作为输入发送给另外一个文件.或命令.或程序.或脚本. 1.I/O重定 ...
- node.js在windows下的学习笔记(9)---文件I/O模块
开发中我们经常会有文件I/O的需求,node.js中提供一个名为fs的模块来支持I/O操作,fs模块的文件I/O是对标准POSIX函数的简单封装. 1.将"hello world" ...
- [Practical Git] Format commit history with git log arguments
When running the git log command, we can pass in options as arguments toformat the data shown for ea ...
- Linq的小知识(一),大家可以学习一下
linq的简介 lLINQ是Language Integrated Query的简称,它是集成在.NET编程语言中的一种特性.已成为编程语言的一个组成部分,在编写程序时可以得到很好的编译时语法检查,丰 ...
- 慎用StringEscapeUtils.escapeHtml步骤
慎用StringEscapeUtils.escapeHtml方法[转] 推荐使用Apache commons-lang的StringUtils来增强Java字符串处理功能,也一直在项目中大量使用Str ...