（原创）JS创建页面进度条（VUE）_vue 在js中实现

需求：制作一个简单的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>
1
2
3
4
5
6
7
8
9

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;
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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

JS

// 加载图片 进度条
    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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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