onload 事件DOMContentLoaded事件DOM加载顺序
Posted Visual Studio
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了onload 事件DOMContentLoaded事件DOM加载顺序相关的知识,希望对你有一定的参考价值。
1、onload 事件
定义与语法
onload事件会在页面或者图像加载完成后立即发生。
法:onload="SomejavascriptCode“;
参数:SomeJavaScriptCode 描述:必需。规定该事件发生时执行的 JavaScript。
支持该事件的 html 标签:<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
支持该事件的 JavaScript 对象:image, layer, window
实例
在本例中,文本 "Page is loaded" 会被显示在状态栏中:
<html> <head> <script type="text/javascript"> function load() { window.status="Page is loaded" } </script> </head> <body onload="load()"
> </body> </html>
2、DOMContentLoaded事件
这个事件是从HTML中的onLoad的延伸而来的,当一个页面完成加载时,初始化脚本的方法是使用load事件,但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发。
domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的;
document.addeventListener(‘DOMContentLoaded‘,function(){...},false);
3、DOM加载顺序
1、解析HTML结构。
2、加载外部脚本和样式表文件。
3、解析并执行脚本代码。
4、构造HTML DOM模型。
5、加载图片等外部文件。
6、页面加载完毕。
以上是关于onload 事件DOMContentLoaded事件DOM加载顺序的主要内容,如果未能解决你的问题,请参考以下文章