如何检测页面加载完成
Posted suwu150
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何检测页面加载完成相关的知识，希望对你有一定的参考价值。
document.readyState
1.定义
一个document 的 document.readyState 属性描述了文档的加载状态。
2.值
一个文档的 readyState 可以是以下值之一：
-
loading / 加载
document仍在加载。 -
interactive / 互动
文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
-
complete / 完成
文档和所有子资源已完成加载。状态表示
load事件即将被触发。
当这个属性的值变化时，document 对象上的readystatechange 事件将被触发。
3.语法
let string = document.readyState;
// "complete"
4.具体使用
可以通过各个状态进行不同的操作
switch (document.readyState)
case "loading":
// The document is still loading.
break;
case "interactive":
// The document has finished loading.
// We can now access the DOM elements.
var span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
break;
case "complete":
// The page is fully loaded.
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/onload 事件
document.onreadystatechange = function ()
if (document.readyState === "complete")
initApplication();
在下面看一个实际应用中的例子,就是平时我们在加载页面的时候,都会要求在显示页面之前会有一个提示界面,在页面加载完成之后,移除掉这个现实界面,我们就可以按照下面的做法去实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.loadpagediv
display:none;
position:absolute;
top:30%;
left:40%;
width:25%;
height:10%;
background-color:green;
border:10px solid blue;
color:red;
</style>
<script>
var id = setTimeout('loadPage()',100);
function loadPage()
// 取得文档载入状态，如果载入完成，则readystate='complete'
// 根据这个可以定时去获取文档载入状态，来实现页面载入等待效果
var readystate = document.readyState.toLowerCase();
if (readystate === 'complete')
clearTimeout(id);
document.getElementById('loadpagediv').style.display = "none";
else
document.getElementById('loadpagediv').style.display = "block";
id = setTimeout('loadPage()',100);
</script>
</head>
<body>
<div id="loadpagediv" class="loadpagediv">
正在加载页面...
</div>
</body>
<iframe src="https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState" style="position:absolute;top:200px;left:200px;width:400px;height:200px;">
</iframe>
</html>
document.onreadystatechange
1.概述
当一个文档的 readyState 属性发生更改时，readystatechange 事件会被触发。
2.语法
document.onreadystatechange = funcRef;
funcRef 是个函数引用,会在readystatechange事件触发时调用.
3.例子
/*
interactive / 互动
文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState
*/
// 模拟DOMContentLoaded事件
document.onreadystatechange = function ()
if (document.readyState === "interactive")
initApplication();
window.onload 事件
1.定义
load事件通常用于检测文档内容或者图片是否加载完毕。
该方法用于在网页加载完毕后立刻执行的操作，即当html加载完毕后，立刻执行某个方法等。
2.为什么使用window.onload()?
因为JS中的函数方法等需要在HTML文档渲染完成才可以使用，如果没有渲染完成，此时的DOM树是不完整的，这样JS文件就可能报出"undefined"错误。
3.常见的用法：
简单的立刻执行函数，假设一个js中只有一个需要页面加载后，立刻执行的函数
那直接调用，不需要加括号
window.Func;
假设一个js中有多个需要页面加载后，立刻执行的函数，那就如下调用即可，需要加括号
window.function()
Func1();
Func2();
Func3();
...
但，以上方式也仅仅适用于绑定的函数不是很多的场合
具体可参见:https://blog.csdn.net/suwu150/article/details/78930068
以上是关于如何检测页面加载完成的主要内容，如果未能解决你的问题，请参考以下文章