DOMContentLoaded实现
时间:2022-05-04
本文章向大家介绍DOMContentLoaded实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
IE系列直到IE9才支持DOMContentLoaded事件,对于IE8及其之前版本,如果html内没有框架,则可以采用document.documentELement.doScroll来判断
是否构建好DOM树;如果html内有框架,则利用document的onreadystatechange事件判断当前DOM树是否构建完毕(框架html内容(只是html文件)加载之后DOM树构建完毕)。
所以可以采用这种方式:
/**
* 实现DomContentLoaded的兼容性
* @param callback
*/
var onDomContentLoaded = function(callback){
var onlyOnce = true;
var onReady = function(callback){
if(onlyOnce){
onlyOnce = false;
onDomContentLoaded.isDomReady = true;
try{
callback();
}catch(e){
throw(new Error('DOM Ready callback occurs an error!'))
}
}
return;
}
if(S.browser.isIe && !('HTMLElement' in window)){ // lt IE9
if(self.top === self){
function s(){
try{
document.documentElement.doScroll('left');
onReady(callback);
return;
}catch(e){
setTimeout(s,50);
}
}
s();
}else{ //包含框架
document.attachEvent('onreadystatechange',function(){
if(document.readyState === 'complete'){
onReady(callback);
document.detachEvent('onreadystatechange',arguments.callee);
}
});
}
document.onload = function(){
onReady(callback);
document.onload = null;
};
}else{
document.addEventListener('DOMContentLoaded',function(){
onReady(callback);
document.removeEventListener('DOMContentLoaded',arguments.callee);
},false);
document.onload = function(){
onReady(callback);
document.onload = null;
};
}
};
另外,John Resig也在《精通javascript》提出了一种方法来判断DOM是否构建完毕,那就是不断轮训判断
if(document && document.getElementById && document.getElementsByTagName && document.body)是否为true,若为true,则
DOM构建完毕。
最后,给出David Flanagan所给出的whenReady函数,很有技巧性:
/*
* Pass a function to whenReady() and it will be invoked (as a method of the
* document) when the document is parsed and ready for manipulation. Registered
* functions are triggered by the first DOMContentLoaded, readystatechange, or
* load event that occurs. Once the document is ready and all functions have
* been invoked, any functions passed to whenReady() will be invoked
* immediately.
*/
var whenReady = (function() { // This function returns the whenReady() function
var funcs = []; // The functions to run when we get an event
var ready = false; // Switches to true when the handler is triggered
// The event handler invoked when the document becomes ready
function handler(e) {
// If we've already run once, just return
if (ready) return;
// If this was a readystatechange event where the state changed to
// something other than "complete", then we're not ready yet
if (e.type === "readystatechange" && document.readyState !== "complete")
return;
// Run all registered functions.
// Note that we look up funcs.length each time, in case calling
// one of these functions causes more functions to be registered.
for(var i = 0; i < funcs.length; i++)
funcs[i].call(document);
// Now set the ready flag to true and forget the functions
ready = true;
funcs = null;
}
// Register the handler for any event we might receive
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", handler, false);
document.addEventListener("readystatechange", handler, false);
window.addEventListener("load", handler, false);
}
else if (document.attachEvent) {
document.attachEvent("onreadystatechange", handler);
window.attachEvent("onload", handler);
}
// Return the whenReady function
return function whenReady(f) {
if (ready) f.call(document); // If already ready, just run it
else funcs.push(f); // Otherwise, queue it for later.
}
}());
- Codeforces 839C Journey【DFS】
- Facebook的漏洞可以让攻击者在分分钟内重置用户账户密码
- 【Java学习笔记之十七】Java中普通代码块,构造代码块,静态代码块区别及代码示例分析
- 【机器学习笔记之六】Bagging 简述
- 洛谷 P1553 数字反转(升级版)【字符串+STL stack】
- C# 实现发送手机短信
- 软件测试人员必须掌握的Linux基本命令
- 【机器学习笔记之五】用ARIMA模型做需求预测用ARIMA模型做需求预测
- Capturing Packets in Linux at a Speed of Millions of PPS
- 【机器学习笔记之四】Adaboost 算法
- 【Java学习笔记之十九】super在Java继承中的用法小结
- 【Java学习笔记之二十一】抽象类在Java继承中的用法小结
- 【Java学习笔记之二十】final关键字在Java继承中的用法小结
- 基于Windows下python环境变量配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Git 的简单使用
- 移动端适配
- 《Algorithms Unlocked》读书笔记1——循环和递归
- 《Algorithms Unlocked》读书笔记2——二分查找和排序算法
- 《Algorithms Unlocked》读书笔记3——计数排序
- vue-element-admin
- 二叉树的递归算法
- mongoDB基本操作
- 一个 Vue + Node + MongoDB 博客系统
- promise 和 async 的用法
- 解决 iPhone 微信 H5 无法自动播放音乐问题
- Sequelize 基本操作
- Java面试高频问题汇总 线程池专题
- Node.js 使用 RSA 做加密
- 面试官:说说Ribbon是如何实现负载均衡的?