js获取当前网页加载状态

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

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: 未找到页面

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

给TA打赏
共{{data.count}}人
人已打赏
运维

go引入使用包异常cannot resolve symbol 'xxx'

2024-11-22 11:59:11

运维

免费注册edu教育邮箱最新方法实测有效

2024-11-22 11:59:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索