（原创）JS创建页面进度条（VUE）

最新推荐文章于 2022-11-24 09:33:34 发布

K.P

最新推荐文章于 2022-11-24 09:33:34 发布

阅读量814

点赞数

分类专栏： vue js HTML 文章标签： vue js HTML

本文链接：https://blog.csdn.net/weixin_44314609/article/details/121247950

版权

vue 同时被 3 个专栏收录

28 篇文章 2 订阅

订阅专栏

18 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

本文介绍了一种简单的方法，通过监听document.readyState属性来创建一个H5页面加载进度条。虽然这种方法可能给人一种进度条是模拟的感觉，但它在实际应用中可以提升用户体验。代码示例包括HTML结构、CSS样式和JavaScript逻辑，展示了如何根据页面加载状态更新进度条的显示。这种方法相比通过图片onload事件逐个跟踪加载，虽然略显简陋，但实施起来更为便捷。

摘要由CSDN通过智能技术生成

需求：制作一个简单的H5邀请函页面，因为需要加载的图片较多，因此添加进度条来提高用户体验。
在这里插入图片描述
HTML

<div class="loading-area cell flex-col" v-if="rate<100">
          <div class="progress">
            <div class="rate">
              <img src="../assets/img/progress.png" alt="">
            </div>
            <div class="mask" :style="{left: rate + '%'}"></div>
          </div>
            <span class="rate-num">{{rate}}%</span>
        </div>

CSS

.loading-area {
      align-items: center;
      .progress {
        width: 600px;
        height: 18px;
        position: relative;
        margin: 386px auto 0;
        overflow: hidden;
        
        .rate {
          width: 100%;
          height: 100%;
          &>img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .mask {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #28015A;
          transition: all .3s;
        }
      }

      .rate-num {
        font-size: 50px;
        color: #00FFFF;
        margin-top: 48px;
        font-weight: lighter;
      }
    }

在这里插入图片描述
如上图所示，可以根据 document.readyState的返回值来判断是否家在完成，虽然有人会说那进度条岂不是假的，也不完全是，虽然有另一种方法将首屏需要加载的图片放在一个数组中，然后通过循环调用图片的 onload事件来增加进度，虽然可以，但繁琐很多，以下就是直接使用readyState判断的方式。

// 加载图片 进度条
    this.timer = setInterval(() => {
    // 判断是否完成加载
      let readyState = document.readyState=='complete'?true:false
      if (readyState&&this.rate>=99) {
      // 当页面完成了加载 并且进度条达到99% 关闭定时器
        clearInterval(this.timer)
      } else if (readyState&&this.rate<99) {
      // 当页面完成了加载,但是进度没达到99% 让进度条过渡到98% 便于体验合理
        this.rate = 98
      } else if (!readyState&&this.rate<=98) {
      // 当页面还没加载完成 进度条还在98%以下 继续执行
      } else if (!readyState&&this.rate==99) {
      // 当页面还没加载完成 进度条达到99% 让进度维持在这 等待页面加载完成
        this.rate--
      } 
      this.rate++

    }, 200)

以上就是一个基本简陋的进度条，仅仅是自己临时所想所写，望大佬们指点