页面加载顺序及触发的事件

Posted yanggb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了页面加载顺序及触发的事件相关的知识,希望对你有一定的参考价值。

页面加载大致的几个步骤

1.开始解析html文档结构。

2.加载外部样式表及javascript脚本。

3.解析执行JavaScript脚本。

4.DOM树渲染完成。

5.加载未完成的资源(如图片)。

6.页面加载成功。

页面加载触发的事件

1.document的readystatechange事件

简单例子:

document.onreadystatechange = function()  // 文档加载状态改变事件处理
    if (document.readyState === "loading")  // document加载中
        console.log(document.readyState);
    
    if (document.readyState === "interactive")  // 互动文档加载完成,文档解析完成,但是如图像,样式表和框架等子资源仍在加载中
        console.log(document.readyState);
    
    if (document.readyState === "complete")  // 文档和所有子资源加载完成,load事件即将被触发
        console.log(document.readyState);
    

readyState属性描述了文档的加载状态,整个加载过程中document.readyState会不断变化,每次变化都触发readystatechange事件。

也可以用事件监听器去绑定:

document.addEventListener("readystatechange", function() 
    console.log(document.readyState);
);

2.document的DOMContentLoaded事件

DOM树渲染完成时候触发DOMContentLoaded事件,此时可能外部资源还在加载。jQuery中的ready事件就是实现的这个事件。

3.window的load事件

当所有的资源全部加载完成后就会触发window的load事件。

 

"三千年前的月亮,是否和今夜一样呢。"

以上是关于页面加载顺序及触发的事件的主要内容,如果未能解决你的问题,请参考以下文章

Electron页面加载事件发生顺序

HTML中页面加载中或前触发的事件怎么写

1307文档的加载

JS 页面加载触发事件 document.ready和onload的区别

jquery是怎么实现:页面加载完毕,而图片未加载完成时,触发的事件?

jquery是怎么实现:页面加载完毕,而图片未加载完成时,触发的事件?