页面元素

<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

onload和DOMContentLoaded对于DOM事件加载的区别

onload事件会等到DOM元素加载完毕, 并且还会等到资源也加载完毕才会执行
DOMContentLoaded事件只会等到DOM元素加载完毕就会执行回调

window.onload = function (ev) {var res = document.querySelectorAll("div");console.log(res);console.log("onload");
}

document.addEventListener("DOMContentLoaded", function () {var res = document.querySelectorAll("div");console.log(res);console.log("DOMContentLoaded");
});

使用attachEvent()

使用IE8进行

document.readyState属性有如下的状态
uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载，文档与用户可以开始交互
complete - 载入完成

onreadystatechange事件就是专门用于监听document.readyState属性的改变的

document.attachEvent("onreadystatechange", function () {if(document.readyState == "complete"){console.log("onreadystatechange");});

document.readyState

一个document 的 Document.readyState 属性描述了文档的加载状态。

当该属性值发生变化时，会在document 对象上触发readystatechange事件。

值

一个文档的 readyState 可以是以下之一：

loading / 正在加载

document 仍在加载。

interactive / 可交互

文档已被解析，"正在加载"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。

complete / 完成

文档和所有子资源已完成加载。表示 load状态的事件即将被触发。

当这个属性的值变化时，document 对象上的 readystatechange事件将被触发。

语法

let string = document.readyState;// "complete"

例子

不同的准备状态

switch (document.readyState) {case "loading":// 表示文档还在加载中，即处于“正在加载”状态。break;case "interactive":// 文档已经结束了“正在加载”状态，DOM元素可以被访问。// 但是像图像，样式表和框架等资源依然还在加载。var span = document.createElement("span");span.textContent = "A <span> element.";document.body.appendChild(span);break;case "complete":// 页面所有内容都已被完全加载.let CSS_rule = document.styleSheets[0].cssRules[0].cssText;console.log(`The first CSS rule is: ${CSS_rule }`);break;
}

// 模拟 DOMContentLoaded/ jquery ready
document.onreadystatechange = function () {if (document.readyState === "interactive") {initApplication();}
}

// 模拟 load 事件
document.onreadystatechange = function () {if (document.readyState === "complete") {initApplication();}
}

资料来源：document.readyState

Mr.J-- jQuery学习笔记(二十五)--监听DOM加载相关推荐

JVM 学习笔记二十五、JVM监控及诊断工具-命令行篇
二十五.JVM监控及诊断工具-命令行篇 1.概述性能诊断是软件工程师在日常工作中经常面对和解决的问题,在用户体验至上的今天,解决好应用软件的性能问题能带来非常大的收益. Java作为最流行的编程语言 ...
Java学习笔记二十五:Java面向对象的三大特性之多态
Java面向对象的三大特性之多态一:什么是多态: 多态是同一个行为具有多个不同表现形式或形态的能力. 多态就是同一个接口,使用不同的实例而执行不同操作. 多态性是对象多种表现形式的体现. 现实中,比 ...
angular学习笔记(二十五)-$http(3)-转换请求和响应格式
本篇主要讲解$http(config)的config中的tranformRequest项和transformResponse项 1. transformRequest: $http({transfor ...
java沙盒模式_JavaScript学习笔记(二十五) 沙箱模式
沙箱模式(Sandbox Pattern) 沙箱模式可以避免命名空间的一些缺点(namespacing pattern),比如: 依赖一个唯一全局的变量作为程序的全局符号.在命名空间模式中,没有办法存 ...
Mr.J-- jQuery学习笔记(二十八)--DOM操作方法(添加方法总结)
Table of Contents appendTo appendTo(source, target) 源代码 append prependTo prependTo源码 prepend ...
JavaScript学习笔记（十五）
JavaScript学习笔记(十五) 事件事件是DOM(文档对象模型)的一部分.事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别. 一.事件流 1.冒泡型事件 IE上的解决方案就是 ...
OpenCV学习笔记（十五）：图像仿射变换：warpAffine(),getRotationMatrix2D()
OpenCV学习笔记(十五):图像仿射变换:warpAffine(),getRotationMatrix2D() 一个任意的仿射变换都能表示为乘以一个矩阵(线性变换)接着再加上一个向量(平移)的形式. ...
学习笔记（十五）——镜像的知识点与注意事项
学习笔记(十五)--镜像的知识点与注意事项一.基础知识 1.SQL Server镜像只有两种模式:高安全模式和高性能模式.两种模式的主要区别在于在事务提交后的操作. 在高性能模式下,主体服务器不需要 ...
MATLAB学习笔记（十五）
MATLAB学习笔记(十五) 一.非线性方程求解与函数极值计算 1.1 非线性方程数值求解 1.2 函数极值的计算 1.2.1 无约束最优化问题 1.2.2 有约束最优化问题一.非线性方程求解与函数 ...

Mr.J-- jQuery学习笔记(二十五)--监听DOM加载

页面元素

onload和DOMContentLoaded对于DOM事件加载的区别

使用attachEvent()

document.readyState

值

语法

例子

Mr.J-- jQuery学习笔记(二十五)--监听DOM加载相关推荐

最新文章

热门文章