DOMContentLoaded

DOM文档加载流程:
(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。// DOMContentLoaded 相当于jQuery中的ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。// load

1、DOMContentLoaded

MDN解析:当初始HTML文档已完全加载和解析时,将触发DOMContentLoaded事件,而不需要等待样式表,图像和子框架页面加载(事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。

document.addEventListener("DOMContentLoaded", function(event) {         
    console.log("DOM fully loaded and parsed");         
    console.log(new Date());   
});                                  
for(var i=0; i<10; i++) {         
console.log(new Date());     
}

此过程中会先执行for循环在执行DOMContentLoaded事件。

2、document.readyState

MDN解析:当document文档正在加载时,返回"loading"。当文档结束渲染但在加载内嵌资源时,返回"interactive",并引发DOMContentLoaded事件。当文档加载完成时,返回"complete",并引发load事件。

var eventHandler = function (event) {     
    console.log(event.type);   
    console.log(event.timeStamp);    
    console.log(document.readyState);    
    console.log('\n');
}
console.log(document.readyState);
document.addEventListener('readystatechange', eventHandler,false);
document.addEventListener('DOMContentLoaded', eventHandler, false);
window.addEventListener('load', eventHandler, false);

console输出如图所示:


DOMContentLoaded_第1张图片

timeStamp返回一个毫秒时间戳,表示事件发生的时间。如果想将这个值转为Unix纪元时间戳,就要计算event.timeStamp + performance.timing.navigationStart。

3、jquery写法

// DOMContentLoaded
$(document).ready(function() { // code... });
// load
$(document).load(function() { // code... });

你可能感兴趣的:(DOMContentLoaded)