onload 事件、DOMContentLoaded事件、DOM加载顺序

1、onload 事件

定义与语法

onload事件会在页面或者图像加载完成后立即发生。

法:οnlοad="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、页面加载完毕。

转载于:https://www.cnblogs.com/Shannong/p/JsFirstBlog.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值