搜索
您的当前位置:首页正文

一张表格告诉你windows.onload()与$(document).ready()的区别_jquery

2023-12-04 来源:爱乐情感

浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在javascript中,通常使用window.onload()方法。

在jquery中,则使用$(document).ready()方法。下面介绍一下两者的区别。

window.onload()$(document).ready()
执行时机在页面所有元素(包括图片,引用文件)加载完后执行。

页面中所有HTML DOM,CSS DOM结构加载完之后就会执行,其他图片可能没有加载完.

如果想要网页所有内容(包括图片等)加载完毕,再注册事件,使用$(window).load(function);

等价于window.onload()

编写个数

不能同时写多个,后面的将会覆盖前面的。ex:

window.onload=function(){ alert("A"); }

window.onload=function(){ alert("B"); }

结果会执行“B”

如果想要顺序执行alert("A")和alert("B")需写成

window.onload=function(){

alert("A");

alert("B");

}

可以同时写多个
简写

$(document).ready(function(){

  //to do;

});

可写成

$().ready(function(){ //$()不带参数默认是document

  //to do;

});或

$(function(){

  //to do;

});

小编还为您整理了以下内容,可能对您也有帮助:

jquery中$ready和window.onload的区别

做web开发时常用Jquery中$(document).ready()和JavaScript中的window.onload方法,两者都是要在页面加载完成以后加载的方法,但是这两者还是有很大区别的。最近遇到了这样的问题,查询了多篇文章,做一下总结。
简单来说,要以用以下张表来表示 :
Jquery的ready()与Javascrpit的load()
window.onload() $(document).ready()
加载时机
必须等待网页全部加载完毕(包括图片等),然后再执行JS代码

只需要等待网页中的DOM结构加载完毕,就能执行JS代码

执行次数
只能执行一次,如果第二次,那么第一次的执行会被覆盖

可以执行多次,第N次都不会被上一次覆盖

举例
以下代码无法正确执行:
window.onload = function() { alert(“text1”);};

window.onload = function() { alert(“text2”);};

结果只输出第二个

以下代码正确执行:
$(document).ready(function(){alert(“Hello”)});
$(document).ready(function(){alert(“Hello”)});
结果两次都输出

简写方案 无 $(function () {})
一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片,以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间,就会导致页面无响应,或者用户做了其它操作了。
而Jeuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片,而不一定要等它显示出来就可以为它绑定点击方法。

load()一般不建议使用,这里主要讲一下( $(selector).ready())。
原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.
Jquery中的详细代码分析:

ready: function(fn) {// 绑定*bindReady();// 如果 DOM 加载完成if ( jQuery.isReady )// 马上运行此函数fn.call( document, jQuery );// 否则保存起来else// 把函数加入缓存数组中jQuery.readyList.push( function() { return fn.call(this, jQuery); } );return this;
}
当然,jquery对不同的浏览器dom加载完成的通知 bindReady()函数也是不同的
var readyBound = false;function bindReady(){if ( readyBound ) return;
readyBound = true;// Mozilla,opera,webkitnightlies支持DOMContentLoaded事件if ( document.addEventListener && !jQuery.browser.opera)// 直接使用事件回调即可document.addEventListener( "DOMContentLoaded", jQuery.ready, false );// 如果是ie并且不是嵌在frame中// 就需要不断地检查文档是否加载完if ( jQuery.browser.msie && window == top ) (function(){if (jQuery.isReady) return;try {document.documentElement.doScroll("left");
} catch( error ) {setTimeout( arguments.callee, 0 );return;
}// and execute any waiting functionsjQuery.ready();
})();if ( jQuery.browser.opera )
document.addEventListener( "DOMContentLoaded", function () {if (jQuery.isReady) return;for (var i = 0; i < document.styleSheets.length; i++)
if (document.styleSheets[i].disabled) {
setTimeout( arguments.callee, 0 );return;
}// and execute any waiting functionsjQuery.ready();
}, false);if ( jQuery.browser.safari ) {var numStyles;
(function(){if (jQuery.isReady) return;if ( document.readyState != "loaded" && document.readyState != "complete" ) {
setTimeout( arguments.callee, 0 );return;
}if ( numStyles === undefined )
numStyles = jQuery("style, link[rel=stylesheet]").length;if ( document.styleSheets.length != numStyles ) {
setTimeout( arguments.callee, 0 );return;
}// and execute any waiting functionsjQuery.ready();
})();
}// A fallback to window.onload, that will always workjQuery.event.add( window, "load", jQuery.ready );
}
}

jquery中$ready和window.onload的区别

做web开发时常用Jquery中$(document).ready()和JavaScript中的window.onload方法,两者都是要在页面加载完成以后加载的方法,但是这两者还是有很大区别的。最近遇到了这样的问题,查询了多篇文章,做一下总结。
简单来说,要以用以下张表来表示 :
Jquery的ready()与Javascrpit的load()
window.onload() $(document).ready()
加载时机
必须等待网页全部加载完毕(包括图片等),然后再执行JS代码

只需要等待网页中的DOM结构加载完毕,就能执行JS代码

执行次数
只能执行一次,如果第二次,那么第一次的执行会被覆盖

可以执行多次,第N次都不会被上一次覆盖

举例
以下代码无法正确执行:
window.onload = function() { alert(“text1”);};

window.onload = function() { alert(“text2”);};

结果只输出第二个

以下代码正确执行:
$(document).ready(function(){alert(“Hello”)});
$(document).ready(function(){alert(“Hello”)});
结果两次都输出

简写方案 无 $(function () {})
一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片,以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间,就会导致页面无响应,或者用户做了其它操作了。
而Jeuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片,而不一定要等它显示出来就可以为它绑定点击方法。

load()一般不建议使用,这里主要讲一下( $(selector).ready())。
原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.
Jquery中的详细代码分析:

ready: function(fn) {// 绑定*bindReady();// 如果 DOM 加载完成if ( jQuery.isReady )// 马上运行此函数fn.call( document, jQuery );// 否则保存起来else// 把函数加入缓存数组中jQuery.readyList.push( function() { return fn.call(this, jQuery); } );return this;
}
当然,jquery对不同的浏览器dom加载完成的通知 bindReady()函数也是不同的
var readyBound = false;function bindReady(){if ( readyBound ) return;
readyBound = true;// Mozilla,opera,webkitnightlies支持DOMContentLoaded事件if ( document.addEventListener && !jQuery.browser.opera)// 直接使用事件回调即可document.addEventListener( "DOMContentLoaded", jQuery.ready, false );// 如果是ie并且不是嵌在frame中// 就需要不断地检查文档是否加载完if ( jQuery.browser.msie && window == top ) (function(){if (jQuery.isReady) return;try {document.documentElement.doScroll("left");
} catch( error ) {setTimeout( arguments.callee, 0 );return;
}// and execute any waiting functionsjQuery.ready();
})();if ( jQuery.browser.opera )
document.addEventListener( "DOMContentLoaded", function () {if (jQuery.isReady) return;for (var i = 0; i < document.styleSheets.length; i++)
if (document.styleSheets[i].disabled) {
setTimeout( arguments.callee, 0 );return;
}// and execute any waiting functionsjQuery.ready();
}, false);if ( jQuery.browser.safari ) {var numStyles;
(function(){if (jQuery.isReady) return;if ( document.readyState != "loaded" && document.readyState != "complete" ) {
setTimeout( arguments.callee, 0 );return;
}if ( numStyles === undefined )
numStyles = jQuery("style, link[rel=stylesheet]").length;if ( document.styleSheets.length != numStyles ) {
setTimeout( arguments.callee, 0 );return;
}// and execute any waiting functionsjQuery.ready();
})();
}// A fallback to window.onload, that will always workjQuery.event.add( window, "load", jQuery.ready );
}
}

document.ready和onload的区别

document.ready和onload的区别

最简单的就是 执行时间

window.onload必须等到页面内包括图片的所有元素载入完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行,不必等到载入完毕。

多次呼叫 document.ready 的话,文件载入完成以后回拨会被依次呼叫。

onload=f1

onload=f2

这样的话,文件载入完成以后只会呼叫f2.

页面载入完成有两种事件,一是ready,表示文件结构已经载入完成(不包含图片等非文字媒体档案),二是onload,指示页面包含图片等档案在内的所有元素都载入完成。

一般情况下一个页面响应载入的顺序是,域名解析-载入-载入js和css-载入图片等其他资讯。

1. Dom Ready应该在“载入js和css”和“载入图片等其他资讯”之间,就可以操作Dom了。

2. Dom Load 在document文件载入完成后就可以可以对DOM进行操作,document文件包括了载入图片等其他资讯。Dom Load就是在页面响应载入的顺序中的“载入图片等其他资讯”之后,就可以操作Dom了

最常用的例子说明Dom Ready和Dom Load两者的区别

1. Dom Ready是在dom载入完成后就可以直接对dom进行操作,比如一张图片只要<img>标签完成,不用等这个图片载入完成,就可以设定图片的宽高的属性或样式等

2. Dom Load是在整个document文件(包括了载入图片等其他资讯)载入完成后就可以直接对dom进行操作,比如一张图片要等这个图示载入完成之后才能设定图片的宽高的属性或样式等;

不是,

window.onload必须等到页面内包括图片的所有元素载入完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行,不必等到所有元素载入完毕。

另外window.onload只能有一个,如果有多只会执行一个;

$(document).ready()可以同时有多个,并且都可以得到执行

window.onload必须等到页面内包括图片的所有元素载入完毕后才能执行,$(document).ready()是DOM结构绘制完毕后就执行,不必等到载入完毕

window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个,$(document).ready()可以同时编写多个,并且都可以得到执行

window.onload没有简化写法,$(document).ready(function(){})可以简写成$(function(){})

没有区别毫不相关的三个单词

1document.

n. 档案;vt. 用档案证明;为…提供档案

2ready

adj. 准备好的,现成的; 即时的,敏捷的; 情愿的; 即将的;

vt. 做好…的准备;

adv. 预先; 已完成地

3onload

vt. 装载

这两种事件都代表的是页面文件载入时触发的,但两者之间区别在于:

ready 事件的触发,表示文件结构已经载入完成(不包含图片等非文字媒体档案)。

onload 事件的触发,表示页面包含图片等档案在内的所有元素都载入完成。

进一步的详细描述,请参阅以下资料:

:php100.program/jquery/2013/0905/5954.

谈谈document.ready和window.onload的区别

(document).ready(...) 和 window.onload 事件虽然具有类似的效果,但是,它们在触发操作的时间上存在着微妙的差异。

window.onload

当一个文件完全下载到浏览器中时,会触发 window.onload 事件。这意味着页面上的全部元素对 javascript 而言都是可以访问的,这种情况对编写功能性的程式码非常有利,因为无需考虑载入的次序。

(document).ready()

通过 $(document).ready() 注册的事件处理程式,则会在 DOM 完全就绪并可以使用时呼叫。虽然这也意味着所有元素对指令码而言都是可以访问的,但是,缺不意味着所有关联的档案都已经下载完毕。换句话说,当 HTML 下载完成并解析为 DOM 树之后,程式码就可以执行。

例:

假设有一个页面,表现的是相簿,这种页面中会包含许多大型影象,我们可以通过 jQuery 隐藏、显示或以其他方式操纵这些影象。如果我们通过 onload 事件设定介面,那么使用者在能够使用这个页面之前,必须要等到每一幅影象都下载完成。

如果行为尚未新增给那些具有预设行为的元素(例如连结),那么使用者的互动可能会导致意想不到的结果。然而,当我们使用 $(document).ready() 进行设定时,这个介面就会更早地准备好可用的正确行为。

使用 $(document).ready() 一般来说都要优于使用 onload 事件处理程式,但必须要明确的一点是,因为支援档案可能还没有载入完成,所以类似影象的高度和宽度这样的属性此时则不一定会有效。如果需要访问这些属性,可能就得选择实现一个 onload 事件处理程式(或者更类似于 jQuery 中 .load() 的等效方法)。

谈谈document.ready和window.onload的区别

$(document).ready(...) 和 window.onload 事件虽然具有类似的效果,但是,它们在触发操作的时间上存在着微妙的差异。

window.onload

当一个文档完全下载到浏览器中时,会触发 window.onload 事件。这意味着页面上的全部元素对 javascript 而言都是可以访问的,这种情况对编写功能性的代码非常有利,因为无需考虑加载的次序。

$(document).ready()

通过 $(document).ready() 注册的事件处理程序,则会在 DOM 完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的,但是,缺不意味着所有关联的文件都已经下载完毕。换句话说,当 HTML 下载完成并解析为 DOM 树之后,代码就可以运行。

例:

假设有一个页面,表现的是图库,这种页面中会包含许多大型图像,我们可以通过 jQuery 隐藏、显示或以其他方式操纵这些图像。如果我们通过 onload 事件设置界面,那么用户在能够使用这个页面之前,必须要等到每一幅图像都下载完成。

如果行为尚未添加给那些具有默认行为的元素(例如链接),那么用户的交互可能会导致意想不到的结果。然而,当我们使用 $(document).ready() 进行设置时,这个界面就会更早地准备好可用的正确行为。

使用 $(document).ready() 一般来说都要优于使用 onload 事件处理程序,但必须要明确的一点是,因为支持文件可能还没有加载完成,所以类似图像的高度和宽度这样的属性此时则不一定会有效。如果需要访问这些属性,可能就得选择实现一个 onload 事件处理程序(或者更类似于 jQuery 中 .load() 的等效方法)。

爱乐情感还为您提供以下相关内容希望对您有帮助:

jquery中$ready和window.onload的区别

(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 (document).ready()可以同时编写多个,并且都可以得到执行 3....

jquery中$ready和window.onload的区别

ready: function(fn) {// 绑定监听器bindReady();// 如果 DOM 加载完成if ( jQuery.isReady )// 马上运行此函数fn.call( document, jQuery );// 否则保存起来else// 把函数加入缓存数组中jQuery.readyList.push( fu...

jquery中$ready和window.onload的区别

主要三个不同点。1,执行时间 2,编写个数 3,简写 1,执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。(document).ready()在DOM结构绘制完毕后就可以执行。2,编写个数 window.onload不能编...

document.ready和onload的区别

document.ready和onload的区别 最简单的就是 执行时间 window.onload必须等到页面内包括图片的所有元素载入完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行,不必等到载入完毕。多次呼叫 document.ready 的...

JavaScript window.onload 事件和 jQuery ready 函数有何不同?_百度知...

使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,相反对于 onload 技术而言,只能在单一函数里使用。鉴于这个好处,用 jQuery ready() 函数比...

谈谈document.ready和window.onload的区别

(document).ready(...) 和 window.onload 事件虽然具有类似的效果,但是,它们在触发操作的时间上存在着微妙的差异。window.onload 当一个文档完全下载到浏览器中时,会触发 window.onload 事件。这意味着页面上的全部元素对...

jquery里,$(window)和$(document)有什么区别?

1、Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中,Window 对象是全局对象,所有的表达式都在当前的环境中计算.2、Document 对象是 Window 对象的一部分,每个载入浏览器的 HTML 文档都会成为 Document ...

JS 页面加载触发事件 document.ready和onload的区别

一、使用时机不同 1、onload:当用户进入页面时就会触发。2、document.ready:是当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。二、作用不同 1、onload:事件常用来检测访问者的浏览器类型和版本,然后根据这些信息载入...

jQuery事件详解之$(document).ready()

既然window.onload比较完备为什么还要用jQuery中的$(document).ready()呢?window.onload事件 每次只能保存对一个函数的引用 ,他会覆盖掉之前的函数,所以不能再现有行为上添加新的行为。如果引用了多个js文件,每个都需要...

document.ready和onload的区别

1、加载程度不同 document.ready:是DOM结构绘制完毕后就执行,不必等到加载完毕。意思就是DOM树加载完毕就执行,不必等到页面中图片或其他外部文件都加载完毕。onload:是页面所有元素都加载完毕,包括图片等所有元素。2、执行...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top