html 页面加载事件,页面加载事件--DOMContentLoaded
DOMContentLoaded 和 window.onload 的区别
当页面完全加载完毕后会触发 window.onload 事件,我们知道可以利用 window.onload 事件来触发并执行需要页面完全加载完毕后才能执行的 javascript 脚本,但是假如页面包含很多样式文件、图片文件、子框架页面(iframe)的话,onload 事件也会被相应延迟到这些文件加载完成才执行,有时候并不是我们所需要的,例如我们想知道页面从接受完毕到 dom 树解析完成所需要的时间,那么 onload 事件则不适合了。
这个时候 DOMContentLoaded 就出场了,它定义为: 当页面文档加载并解析完毕之后会马上出发 DOMContentLoaded 事件,而不会等待样式文件、图片文件和子框架页面的加载。
示例
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
兼容性
DOMContentLoaded 目前支持所有主流浏览器,IE9 之后也支持, 更多请看can I use?
如果要兼容 IE,则需要额外两个事件,在 IE8 中,可以使用 readystatechange 事件来监测 DOM 文档是否加载完毕,在更早的 IE 版本可以通过每隔一段时间用 try/catch 执行一次 document.documentElement.doScroll('left') 来监测这一状态, 因为这条代码在 DOM 加载执行完毕之前会抛出错误(throw an error)
根据以上的解释,我们可以写一个兼容 IE 的 DOMContentLoaded 事件from
// if IE
function IEContentLoaded (w, fn) {
var d = w.document, done = false,
// only fire once
init = function () {
if (!done) {
done = true;
fn();
}
};
// polling for no errors
(function () {
try {
// throws errors until after ondocumentready
d.documentElement.doScroll('left');
} catch (e) {
setTimeout(arguments.callee, 50);
return;
}
// no errors, fire
init();
})();
// trying to always fire before onload
d.onreadystatechange = function() {
if (d.readyState == 'complete') {
d.onreadystatechange = null;
init();
}
};
}
实验分割线
目前很多库都实现了兼容性的页面加载完成事件,大概思路是先判断 document.readyState === 'complete' 是否为真,如果为真则直接执行脚本,否则才将脚本绑定到页面加载完成的事件,然后根据 document 是否有 addEventListener 来区分主流浏览器和 IE 浏览器,因为 IE9 及以后基本和主流浏览器一样的标准,所以主要用来区分 IE8 及以下,对于主流浏览器采用 DOMContentLoaded + window.load, 对于 IE8 及以下,采用 onreadystatechange + window.onload + doScroll。
这里要注意, onreadstatechange 事件并不可靠,如果页面中存在图片的时候,可能反而在 onload 事件之后才触发,正常来说,它只能正确地执行页面不包含二进制资源或者非常少或者被缓存为时作为一个备选方案
function domReady(fn) {
var ready = false,
top = false,
doc = window.document,
root = doc.documentElement,
modern = doc.addEventListener,
add = modern ? 'addEventListener' : 'attachEvent',
del = modern ? 'removeEventListener' : 'detachEvent',
pre = modern ? '' : 'on',
init = function(e) {
if (e.type === 'readystatechange' && doc.readyState !== 'complete') return;
(e.type === 'load' ? window : doc)[del](pre + e.type, init, false);
if (!ready && (ready = true)) fn.call(window, e.type || e);
},
poll = function() {
try {
root.doScroll('left');
} catch(e) {
setTimeout(pull, 50);
return;
}
init('poll');
};
if (doc.readyState === 'complete') fn.call(window, 'lazy');
else {
if (!modern && root.doScroll) {
try {
top = !window.frameElement;
} catch(e) {}
if (top) poll();
}
doc[add](pre + 'DOMContentLoaded', init, false);
doc[add](pre + 'readystatechange', init, false);
window[add](pre + 'load', init, false);
}
}
相关事件
拓展
html 页面加载事件,页面加载事件--DOMContentLoaded相关推荐
- 关于ASP.NET动态加载Master页面
代码 //关于ASP.NET动态加载Master页面 //首先创建一母版页Master.master /* <%@ Master Language="C#" AutoEven ...
- js中load载入html页面,使用jquery的load方法加载html页面,但是html引入的js不生效
Write By Monkeyfly 以下内容均为原创,如需转载请注明出处. 前提 有一个公共的登录弹框页面需要在多个页面引用,百度后就使用了jQuery 的 load 方法. 做法: 将公共的 ht ...
- 基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息关键代码:代码如下: var stop=true; $(window).scroll(function(){ totalheight = parse ...
- JS浏览器加载一个页面的过程
加载过程->从上向下逐行进行加载 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
- 一个页面从输入URL到加载显示完成,发生了什么?
面试经典题--URL加载 一.涉及基本知识点: 1. 计算机网络 五层因特尔协议栈: 应用层(dns.http):DNS解析成IP并完成http请求发送: 传输层(tcp.udp):三次握手四次挥手模 ...
- jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
- [WebKit]浏览器的加载与页面性能优化
非常棒.非常系统的一份资料,值得阅读! 原文来自百度泛用户体验. 作者:nwind 本文将探讨浏览器渲染的loading过程,主要有2个目的: 了解浏览器在loading过程中的实现细节,具体都做了什 ...
- html 进入页面延迟加载数据,跳转至预加载的页面后数据显示延迟问题
请问各位大神: 从A页面跳转到预加载好的B页面,B页面要用ajax从服务器中取出数据并显示,现在跳过去后会先显示页面,但是数据会延迟1秒左右才会显示.这该如何解决,或者有什么办法可以让B页面的数据完全 ...
- JS本地存储加载渲染页面信息、动态更新本地存储数据
本地存储数据加载到页面: 从本地存储中获取数据,并由字符串基础类型转换为对象类型(存储至堆内存中) 初始化变量data 为空数组(变量data存储在栈内存中) 将获取的数据赋值给变量data (实质为 ...
- Android加载H5页面手机的返回操作
最近接了一个新项目,项目说是混合开发,其实就是原生给个壳,实现全是前端的同学做的,接到项目后,领导说了很多bug,其中这个比较有趣,所以在这个记录一下,还原一下: 当我们登录成功后进入首页,然后再首页 ...
最新文章
- 嵌入式C语言之位运算 ..|.~.
- 前端学习(1672):前端系列实战课程之加速减速运动
- 关于ASP.NET 中的主题
- JAVA菜鸟入门HelloWorld
- CSS中z-index
- enum枚举类型的范例
- Java对Domino Objects的访问控制
- string查找字符(串)
- “安卓之父”因性侵丑闻离职谷歌获9000万美元补偿,曝二次离职再捞900万
- beyong经典之作
- 扫地机器人的喋血江湖
- 音乐能力与计算机能力结合,作曲与作曲技术理论专业(计算机作曲与音乐制作)培养方案...
- 32位与64位系统基本数据类型的字节数
- Trimble Yuma超级掌上计算机实机感受
- kali渗透实战02---获取内网QQ相册
- VB.net版机房收费系统——结账功能实现(代码部分)
- 深度学习中:epoch、batch size和iterations之间的关系
- mysql 大量数据插入优化
- 计算机网络怎么知道起始序号,怎么知道自己电脑上操作系统的序列号?
- 浏览器性能对比测试方法与评价模型研究
热门文章
- 金蝶oracle用鼎信诺取数,取数软件 审计取数软件?
- 风雨三十载,华为的沉浮往事
- mtkwin10驱动_MTK手机刷机驱动下载|MTK通用USB刷机驱动 Win7/Win10 自动安装版 下载_当下软件园_软件下载...
- pycharm快捷键大全
- java实现pdf转word,如何使用Java将pdf文件转换为word文件
- python参考手册 第二章
- 项目:识别Twitter用户性别
- 【Python爬虫练手】lhscan扫图一键下载,搬运辉夜生肉以及制熟肉可用
- 大数据导论答案_2020年智慧树APP大数据导论第一单元章节测试网课答案大学课后答案...
- STK Component Insight3D控件-WPF方式