今天做项目的时候遇到一个问题,结果死在了$(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去人为触发这个自定义事件。

随机推荐

  1. Java自定义Annotation,通过反射解析Annotation

    创建一个自定义的Annotation import java.lang.annotation.*; import java.lang.reflect.Method; @Documented @Targ ...

  2. 转载ASP.net 中 OutputCache 指令各个参数的作用

    使用@ OutputCache指令 使用@ OutputCache指令,能够实现对页面输出缓存的一般性需要.@ OutputCache指令在ASP.NET页或者页中包含的用户控件的头部声明.这种方式非 ...

  3. 使用教程sqlite

    访问地址: http://www.runoob.com/sqlite/sqlite-where-clause.html

  4. [转]SpringMVC日期类型转换问题三大处理方法归纳

    http://blog.csdn.net/chenleixing/article/details/45190371 前言 我们在SpringMVC开发中,可能遇到比较多的问题就是前台与后台实体类之间日 ...

  5. PowerShell查询sql server

    function Invoke-SQL1: function Invoke-SQL { param( [string] $DBServer, [string] $Database, [string] ...

  6. 46 关于Linux的I/O重定向

    I/O重定向是一个过程,这个过程捕捉一个文件.或命令.或程序.或脚本.甚至代码块(code block)的输出,然后把捕捉到的输出,作为输入发送给另外一个文件.或命令.或程序.或脚本. 1.I/O重定 ...

  7. node.js在windows下的学习笔记(9)---文件I/O模块

    开发中我们经常会有文件I/O的需求,node.js中提供一个名为fs的模块来支持I/O操作,fs模块的文件I/O是对标准POSIX函数的简单封装. 1.将"hello world" ...

  8. [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 ...

  9. Linq的小知识(一),大家可以学习一下

    linq的简介 lLINQ是Language Integrated Query的简称,它是集成在.NET编程语言中的一种特性.已成为编程语言的一个组成部分,在编写程序时可以得到很好的编译时语法检查,丰 ...

  10. 慎用StringEscapeUtils.escapeHtml步骤

    慎用StringEscapeUtils.escapeHtml方法[转] 推荐使用Apache commons-lang的StringUtils来增强Java字符串处理功能,也一直在项目中大量使用Str ...