jQuery $(document).ready()和JavaScript onload事件详解区别

时间 2019-11-11

标签 jquery document ready javascript onload 事件详解区别栏目 JQuery 繁體版

原文原文链接

jQuery $(document).ready()和window.onload

　　根据ready()方法的API说明http://api.jquery.com/ready/html

　　这个方法接收一个function类型的参数ready(handler), 方法的做用是: Specify a function to execute when the DOM is fully loaded.jquery

　　即当DOM加载完毕的时候,执行这个指定的方法.api

　　由于只有document的状态ready以后,对page的操做才是安全的.浏览器

　　$(document).ready()仅在DOM准备好的时候执行一次.安全

　　与之相比,load事件会等到页面渲染完成执行,即等到全部的资源(好比图片)都彻底加载完成的时候.测试

　　$(window).load(function(){…})会等整个页面,不单单是DOM,还包括图像和iframes都准备好以后,再执行.spa

　　而ready()是在DOM准备好以后就执行了,即DOM树创建完成的时候.因此一般ready()是一个更好的时机.htm

　　若是DOM初始化完成以后再调用ready()方法,传入的新的handler将会当即执行.blog

　　注意:ready()方法屡次调用,传入的handler方法会串联执行(追加).事件

　　而JavaScript中,window.onload是赋值一个方法,即后面的会覆盖掉前面的.

一系列测试结论，详细看连接

结论:触发前后次序

在Chrome中:

　　ready()

　　window.onload==document.body.onload

在FireFox中:

　　ready()

　　window.onload==<body onload=“”>==document.body.onload

　　此分析的结果跟浏览器,甚至浏览器版本相关,本文写于2015.2.6

　　Chrome Version: 40.0.2214.94

　　FireFox Version: 35.0

转发：http://www.cnblogs.com/mengdd/p/4276801.html