如何检测页面加载完成 偏执的太偏执、 2022-02-19 18:15 321阅读 0赞 # document.readyState # #### 1.定义 #### 一个[`document`][document] 的 **document.readyState** 属性描述了文档的加载状态。 #### 2.值 #### 一个文档的 **readyState** 可以是以下值之一: * loading / 加载 [`document`][document] 仍在加载。 * interactive / 互动 文档已经完成加载,文档已被解析,但是诸如图像,样式表和框架之类的子资源仍在加载。 * complete / 完成 文档和所有子资源已完成加载。状态表示 `load` 事件即将被触发。 当这个属性的值变化时,[`document`][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][https_blog.csdn.net_suwu150_article_details_78930068] [document]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document [https_blog.csdn.net_suwu150_article_details_78930068]: https://blog.csdn.net/suwu150/article/details/78930068
还没有评论,来说两句吧...