简述domready和onload事件的区别？图片的onlo

[问答题]

简述domready和onload事件的区别？图片的onload和domready和页面onload的先后顺序，并简述原因。

推荐

🌀落在起风的地方🌀

dom文档加载的步骤为： 1.解析html结构 2.加载外部脚本和样式表文件 3.解析并执行脚本代码 4.dom树构建完成 // DOMContentLoaded 5.加载图片等外部文件 6.页面加载完毕 // window.onload 可以通过addEventListener测试一下结果先DOMContentLoaded也即domready然后img的ready最后window的ready。

编辑于 2017-05-23 13:47:53 回复(1)

小菜鸟fe

onload是要把图片这些资源全部加载完之后才进行下面的操作，而domready是当dom树加载了后就可以进行下面的操作，而不需要等待资源加载

编辑于 2017-05-23 13:47:53 回复(0)

花房姑娘_zq

用个最常用的例子说明Dom Ready和Dom Load两者的区别 Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等； Dom Load是在整个document文档（包括了加载图片等其他信息）加载完成后就可以直接对dom进行操作，比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等；

发表于 2017-03-08 23:45:04 回复(0)

8965471

domReady表示dom树加载完毕执行,而不包括图片,iframe,flash等元素,只要dom标签加载完毕则运行;

onload表示当页面所有元素加载完毕后才执行,所以页面图片越多onload距离执行的时间越慢。

发表于 2017-08-22 10:01:52 回复(0)

嗯哼呀呀

感觉同学们的回答有点不清楚，自己整理下：

首先要清楚dom文档加载的步骤为：1.解析html结构；2.加载外部脚本和样式表文件；3解析并执行脚本；4.dom树构建完成；5.加载图片等外部文件；6.页面加载完毕。

然后，回答题目：

domready（也叫DOMContentLoaded ），在第4步完成后触发；图片onload是在第5步完成后触发；页面onload是第6步完成后触发。由此可见三者执行顺序为：domready→图片load→页面load。

domready和onload事件区别;

前者：在DOM文档结构准备完毕后就可以对DOM进行操作；后者：整个document文档（包括图片等加载信息)加载完成后才能对DOM进行操作。

发表于 2017-08-24 10:56:36 回复(0)

柠小哀

这两种事件都代表的是页面文档加载时触发的但两者之间区别在于： ready 事件的触发表示文档结构已经加载完成（不包含图片等非文字媒体文件） onload 事件的触发表示页面包含图片等文件在内的所有元素都加载完成由此可见三者执行顺序为：domready 图片load 页面load DOMContentLoaded与Load事件触发的时机不一样先触发DOMContentLoaded事件后触发load事件如果外部脚本中出现defer延迟脚本或async异步脚本这两种脚本有可能在DOMContentLoaded事件之前或之后执行

编辑于 2019-05-02 00:18:30 回复(0)