有时候我们为了更好的 用户体验 通常 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 事件来监听不同 加载状态 根据实时返回的 网页加载状态 进行友好的事件处理 增强用户体验 。