js获取当前网页加载状态

　有时候我们为了更好的 用户体验 通常 UI页面 设计时会在页面上展示内容 加载状态 ,这个时候我们可以通过一下 js前端代码 来实现当前网页 加载状态 。

onreadystatechange 事件简单应用

/*判断当前页面加载状态*/
document.onreadystatechange=function () {
   //获取当前网页状态
   switch (document.readyState) {
       case "loading":
           //正在加载
           console.log("正在加载");
           break;
       case "interactive":
           //结构加载完成
           console.log("结构加载完成");
           break;
       case "complete":
           //全部加载完成
           console.log("全部加载完成");
           break;
   }
}

onreadystatechange 事件详解

　当前页面有内容的请求被 发送到服务器端 的时候或者我们需要执行一些基于响应的任务和每当 readyState 改变时，就会触发 onreadystatechange 事件。

XMLHttpRequest 对象的三个重要的属性

onreadystatechange 属性

　存储函数（或函数名）,每当 readyState 属性改变时,就会调用该函数,也是我们本文要用的事件属性。

readyState 属性

　存有 XMLHttpRequest 的状态,从 0 到 4 发生变化。

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

status 属性

• 200: "OK"
• 404: 未找到页面

　我们通过 原生js 的 onreadystatechange 事件来监听不同 加载状态 根据实时返回的 网页加载状态 进行友好的事件处理 增强用户体验 。