JavaScript tips:window.onload与$(document).ready()的差异

1、window.onload在$(document).ready()之后执行

原因:二者触发与否,都是依据document.readyState这个属性。

(1)document.readyState的值:uninitialized、loading、interactive、complete(这四个值,依据时间先后排序)。

(2)当其值为interactive时,会触发documentContentLoaded事件,JQuery.ready()就是对documentContentLoaded事件设计了一个函数,从而执行JQuery.ready定义的任务队列。

(3)当其值为complete时,会触发load事件。

(4)综上,window.onload会在$(document).ready()之后执行。

协议原文:document . readyState

Returns "loading" while the Document is loading, "interactive" once it is finished parsing but still loading sub-resources, and "complete" once it has loaded.

The readystatechange event fires on the Document object when this value changes.

2、window.onload多次赋值会产生覆盖现象,而$(document).ready()不会。

原因:

(1)onload是window对象的成员方法,是指向堆内存中的Function类型的Object的引用。因为JavaScript不存在函数重载机制,所以对onload多次赋值,会导致解除上一次对某Function的引用,转而将引用指向当前函数的引用,从而产生覆盖现象。

(2)$(document).ready()实现了一个任务对象,多次传入function,向任务队列中添加一个成员而已。

时间: 2024-12-30 12:03:13

JavaScript tips:window.onload与$(document).ready()的差异的相关文章

jquery学习笔记一之window.onload与$(document).ready()区别

1.window.onload与$(document).ready()区别 执行时机:前者必须等待网页中所有的内容加载完毕后(包括图片)才能执行,后者 网页中说有的Dom结构绘制完毕后就执行,可能Dom元素关联的内容并没有加载完成. <!DOCTYPE html> <html> <head> <title>test</title> <script type="text/javascript" src="js/j

window.onload与$(document).ready()

在我们编写javascript代码的时候,我们开始会这样写的: window.onload = function (){ //编写代码 } 我并不知道为什么会是这样写的,看着别人这样写我也就这样写.今天我就来简单的说说:谈到onload我们要讲HTML的执行顺序.HTML的执行顺序是至上到下的,除非你特别的说明,javascript不会等到等到页面加载加载完成后才执行的. 例如:网页中有这样的一行代码 <p id="name">My name is Aaron</p&

浏览器加载模式:window.onload和$(document).ready()的区别(详解)

jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: window.onload = function () {}; //JavaScript等待加载 $(document).ready(function () {}); //jQuery等待加载load和ready区别 window.onload $(document).ready() 执行时机 必须等待网页

window.onload与$(document).ready()的区别

<锋利的jQuery>上摘抄下来: window.onload $(document).ready() 执行时机 必须等待网页中所有的内容加载完毕后(包括图片)才能执行 网页中所有DOM结果绘制完毕后就执行,可能DOM元素关联的东西并没有加载完 编写个数 不能同时编写多个 以下代码无法正确执行:window.load = function() {  alert("test1"); }; window.load = function() {  alert("test

window.onload()和$(document).ready()区别

1 $(window).load(function() { 2 $("#btn-upload").click(function(){ //比如说: 3 uploadPhotos(); 4 }); 5 }); window.onload()和$(document).ready()区别

window.onload和document.ready的区别

window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不必等到页面中的其他文件(例如图片等文件)都加载完毕. 而document.ready则是必须要等到dom文档结构和其他包括图片在内放入所有文件全部加载成功后才可以执行 二.编写个数,被执行的次数不同 window.onload不能通知书编写多个,就算写了多个,也只能执行一个: document.re

window.onload和document.ready

浏览器解析大致有以下几个步骤: (1)    解析HTML结构 (2)       加载外部脚本和样式 (3)       解析并执行脚本代码 (4)       构造HTML DOM 模型 (5)       加载图片等外部文件 (6)       界面加载完成 window.onload会在页面所有内容加载完成之后执行(第6步之后),比如图片等对媒体文件.如果媒体文件较多,即时网页文档已经显示,但load事件不会触发. document.ready会在DOM绘制完毕后执行(第4步之后),能确

window.onload()和$(document).ready()方法异同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 $(document).ready()可以同时编写多个,并且都可以得到执行 window.onload没有简化写法 $(document).ready(function(){})可以简写成$(function(){}); 需要注意一

浏览器加载模式:window.onload和$(document).ready()

jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: window.onload = function () {}; //JavaScript等待加载 $(document).ready(function () {}); //jQuery等待加载load和ready区别 window.onload $(document).ready() 执行时机 必须等待网页