js监听DOM元素加载的优化与解析
步骤1:
//onload会等到dom元素和相关资源加载完毕才会执行
window.onload = function(ev){
var demo = document.querySelectorAll("div");
console.log(1);
console.log(demo);
}
// 通过事件监听执行
// DOMContentLoaded事件只会等到dom元素加载完毕就会执行
document.addEventListener("DOMContentLoaded", function(){
var demo = document.querySelectorAll("div");
console.log(2);
console.log(demo);
})
打印结果2在前,说明DOMContentLoaded事件比onload快,但是addEventListener不支持ie9以下浏览器,所以为了兼容性可以使用
步骤2:
高级浏览器中不适用attachEvent
//通过onreadystatechange专门用于监听document.readyState属性的改变的
//document.readyState属性返回当前文档的状态(有如下几个状态):
/* uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载,文档与用户可以开始交互
complete - 载入完成 */
document.attachEvent("onreadystatechange", function(){
if(document.readyState == "complete"){
console.log("3");
}
})
综合得到自己封装的类似jquery中的ready方法:
ready: function(fn){
//监听DOM元素是否加载完毕
if(document.readyState == "complete"){
fn();
}
else if(document.addEventListener){
document.addEventListener("DOMContentLoaded", function(){
fn();
});
}
else {
document.attachEvent("onreadystatechange", function(){
if(document.readyState == "complete"){
fn();
}
});
}
}