如何检测页面加载完成
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
以上是关于如何检测页面加载完成的主要内容,如果未能解决你的问题,请参考以下文章