onload事件和ready方法的区别

部分内容转载自ready和onload的区别

$(document).ready()和window.onload在表面上看都是页面加载时我们就去执行一个函数或动作，但是在

具体的细节上$(document) ready()和window onload还是有区别的。

1.执行时间

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

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

可以这样理解记忆：Document对象是Window对象的一个属性，所以Window对象所需加载的时间比Document对象要长。

2.编写个数不同

　　window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个（因为一个对象）

　　$(document).ready()可以同时编写多个，并且都可以得到执行

举个例子：我们需要为body添加一个<h1>元素，要等到所有的页面资源加载完毕后才能执行代码，这样我们就要利用DOM的window.onload事件，而不能使用ready()方法。

如下所示：

$(window).onload(function(){

$('body').append('<h1>hello world</h1>');

});

它们还有以下形式的变化：

window.onload == $("window").load(function(){});

$(document).ready(function(){}) == $(function(){});

onload事件和ready方法的区别相关推荐

jquery中DOM加载事件，onload事件和ready事件
全栈工程师开发手册 (作者:栾鹏) jquery系列教程4-事件操作全解 jquery中DOM加载事件 jquery中的DOM加载事件分为onload事件和ready事件.,具体功能如代码中注释. 代 ...
onload与ready方法的区别
Jquery中$(document).ready()和window.onload的区别 $(document).ready()和window.onload在表单上看都是页面加载时我们就去执行一个函数或 ...
JS中window的onload和ready方法的区别
window.onload:所有元素加载完毕才会执行,无需考虑加载的次序当一个文档完全下载到浏览器中时,才会触发window.onload事件.这意味着页面上的全部元素对js而言都是可以操作的,也就 ...
window.onload和$(document).ready(function(){})的区别
前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...
共享onload 事件
共享onload事件由于在使用JavaScript 对HTML文件进行行为控制的时候,首先需要浏览器把HTML文件加载完成,才能正确的执行JS代码.文档将被加载到浏览器窗口里,document对象又 ...
jquery中的ready方法和window的onload方法的区别
jquery中的ready方法和window.onload的区别区别 jquery的ready方法在网页中的DOM结构加载完成后执行.window.onload()必须等到网页全部加载完毕(包括图片 ...
html——windows.onload()与$(document).ready()区别
最近开始写html,原来基本学的都是皮毛,js与jquery混写,现在分开后,初始化的两个函数有点不太清楚就总结了下. 浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在java ...
window.onload与$(document).ready()的区别
以浏览器装载文档为例,在页面加载完毕后,浏览器会通过Javascript为DOM元素添加事件.在常规的Javascript代码中,通常使用window.onload方法,而在Jquery中,使用 ...
jQuery的$(document).ready()和JavaScript onload事件
对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <metacharset="utf-8"> <ht ...

onload事件和ready方法的区别

onload事件和ready方法的区别相关推荐

最新文章

热门文章