document.ready和onload的区别

html-css018

document.ready和onload的区别,第1张

document.ready和onload的区别为:加载程度不同、执行次数不同、执行速度不同。

一、加载程度不同

1.document.ready:在DOM加载完成后就可以可以对DOM进行操作。一般情况一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息。那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。

2.onload:在document文档加载完成后就可以可以对DOM进行操作,document文档包括了加载图片等其他信息。那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后,就可以操作Dom了。

二、执行次数不同

1.document.ready:document.ready可以写多个.ready,可以执行多次,第N次都不会被上一次覆盖。

2.onload:onload只能执行一次,如果有多个,那么第一次的执行会被覆盖。

三、执行速度不同

1.document.ready:onload除了要等待DOM被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在onload事件上的代码在执行时有明显的延迟。

2.onload:document.ready函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。

你在用js创建表格的时候给这个表格添加一个id或者一个class,然后利用这个id或者class来定义你的表格样式,另一种方法你也可以把表格创建在一个div中,比如<div class="div1">用js插入的表格放在这</div>,然后.div1 table {样式},这样利用父级的class或id名来定义也可以。

1、概念

document.ready:

是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件);

document.load:

是onload,指示页面包含图片等文件在内的所有元素都加载完成。

2、作用

document.ready:

在DOM加载完成后就可以可以对DOM进行操作。

一般情况一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息。

那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。

document.load:

在document文档加载完成后就可以可以对DOM进行操作,document文档包括了加载图片等其他信息。

那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后,就可以操作Dom了。

3、加载顺序

document.ready:

文档加载的顺序:域名解析-->加载HTML-->加载JavaScript和CSS-->加载图片等非文字媒体文件。

只要<img>标签加载完成,不用等该图片加载完成,就可以设置图片的属性或样式等。

在原生JavaScript中没有Dom ready的直接方法。

document.load:

文档加载的顺序:域名解析-->加载HTML-->加载JavaScript和CSS-->加载图片等非文字媒体文件。

DOM load在加载图片等非文字媒体文件之后,表示在document文档加载完成后才可以对DOM进行操作,document文档包括了加载图片等非文字媒体文件。

例如,需要等该图片加载完成,才可以设置图片的属性或样式等。

在原生JavaScript中使用onload事件。

扩展资料

$(document).ready()和传统的方法<body onload=”load()”>相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载。

而$(document).ready()所要执行的代码是在DOM元素被加载完成的情况下执行,所以,使用document.ready()方法的执行速度比onload()的方法要快。

Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作,jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。