常用的网页加载进度条

爱被打了一巴掌 2022-05-10 22:04 585阅读 0赞

关于进度条的图片，有几个专门的网站可以下载

[https://icons8.com/preloaders/][https_icons8.com_preloaders]，

可以在这里直接下载需要使用的进度条类型图片

1.使用定时器来做一个固定时间的进度条

好处是比较简单，容易实现，缺点是当页面在电脑中已经有缓存了，本来可以快速加载页面的，但是每次仍然需要加载定时器的进度条，等待一个固定的时间

2.通过加载状态事件制作进度条

document.onreadystatechange  页面加载状态改变时的事件

document.readyState    返回当前文档的状态

readyState：

1.uninitilized  -  还未开始载入

2.loading - 载入中

3.interactive - 已加载，文档与用户可以开始交互

4.complete - 载入完成

document.onreadystatechange=function(){
    if(document.readyState=="complete"){
       $(".loading").fadeOut();        //填写进度条实现方法
      }
    }

3.定义在头部的进度条

原理是在<body></body>不同的位置设置进度条的width的百分比

4.实时获得加载数据的进度条

建立图像对象：图像对象名称=new Image()

属性：border complete height...

事件：onload onerror onkeydown onkeypress...

src属性一定要写到onload的后面，否则程序在IE中会出错

5.事实上在vue中，直接使用钩子函数来控制就可以了，并不需要这么复杂，如果需要进度条和百分比，下面是一个具体的案例。

1<template>
      2   <div class="plLoading">
      3     <div class="plLoadingContent">
      4       <div class="plLoadingLogo">
      5         <img src="http://static.crecgec.com/Kaipiao/loadingLogo.png"/>
      6       </div>
      7       <div class="plLoadingCon">
      8         <div class="plLoadingShow" ref="plLoadingShow" :style="{width: plsStyleWidth}"></div>
      9         <div class="plLoCir" ref="plLoCir" :style="{left: plcStyleLeft}" v-show="plcShow"></div>
     10       </div>
     11       <div class="plLoadingNum" ref="plLoadingNum">0%</div>
     12     </div>
     13     
     14     <div class="imgsHidden displayNone">
     15       <img class="hImg" src="http://static.crecgec.com/Kaipiao/countDownTitle.png">
     16       <img class="hImg" src="http://static.crecgec.com/Kaipiao/countDown.png">
     17       <img class="hImg" src="http://static.crecgec.com/Kaipiao/countDown1.png">
     18       <img class="bImg" src="http://static.crecgec.com/Kaipiao/background.png">
     19       <img class="hImg" src="http://static.crecgec.com/Kaipiao/loadingLogo.png">
     20     </div>
     21   </div>
     22 </template>
     23 
     24 <script type="text/ecmascript-6">
     25   import $ from 'jquery'
     26 
     27   export default {
     28     props: {
     29       eleH: {
     30         type: String,
     31         default: 'hImg'
     32       },
     33       eleB: {
     34         type: String,
     35         default: 'bImg'
     36       },
     37       dataIsOk: {
     38         type: Boolean,
     39         default: false
     40       }
     41     },
     42     data () {
     43       return {
     44         plsStyleWidth: 0, // plLoadingShow的初始width
     45         plcStyleLeft: 0, // plLoCir的初始left值
     46         plcShow: true, // plLoCir初始是显示状态
     47         backImgLoading: false, // 背景图片是否加载成功(40)
     48         otherImgLoading: false, // 头部、底部图片加载成功(40)
     49         dataLoading: '', // 后台返回的数据加载成功(20)
     50         lodingWidth: 0,
     51         otherImgLength: 0,
     52         otherNum: 0,
     53         backImgLength: 0,
     54         backNum: 0
     55       }
     56     },
     57     watch: {
     58       // 整个也没被分为三部分：背景图、其他图片、数据
     59       // 监控otherImgLoading，（其他图片加载成功），this.lodingWidth增加40
     60       otherImgLoading () {
     61         this.lodingWidth = this.lodingWidth + 40
     62       },
     63       // 监控otherImgLoading，（背景图片加载成功），this.lodingWidth增加40
     64       backImgLoading () {
     65         this.lodingWidth = this.lodingWidth + 40
     66       },
     67       // 监控dataIsOk，（数据加载成功，这个有父组件传递过来），this.lodingWidth增加20
     68       dataIsOk () {
     69         if (this.dataIsOk) {
     70           this.lodingWidth = this.lodingWidth + 20
     71         }
     72       },
     73       // 监控lodingWidth的值
     74       lodingWidth () {
     75         if (this.lodingWidth <= 100) {
     76           this.setLoadingWidthTimer(this.lodingWidth)
     77         }
     78       },
     79       // 监控plcStyleLeft（圆球的left值），如果值为484px（自己设置的），表明圆球到了最右边
     80       // 圆球隐藏
     81       plcStyleLeft () {
     82         if (this.plcStyleLeft === '484px') {
     83           setTimeout(() => {
     84             this.plcShow = false
     85             this.hasScroll()
     86             this.$emit('tipShow', {loadingIsShow: false})
     87           }, 500)
     88         }
     89       }
     90     },
     91     mounted () {
     92       this.isOtherImgLoading(this.eleH)
     93       this.isBackImgLoading(this.eleB)
     94       this.noScroll()
     95     },
     96     methods: {
     97       // 设置width、left
     98       setLoadingWidthTimer (newPllsWidth) {
     99         if (newPllsWidth <= 40) {
    100           setTimeout(() => {
    101             this.plsStyleWidth = (500 * newPllsWidth / 100) + 'px'
    102             this.plcStyleLeft = (475 * newPllsWidth / 100) + 'px'
    103             this.$refs.plLoadingNum.innerHTML = newPllsWidth + '%'
    104           }, 500)
    105         } else if (newPllsWidth <= 80) {
    106           setTimeout(() => {
    107             this.plsStyleWidth = (500 * newPllsWidth / 100) + 'px'
    108             this.plcStyleLeft = (484 * newPllsWidth / 100) + 'px'
    109             this.$refs.plLoadingNum.innerHTML = newPllsWidth + '%'
    110           }, 1000)
    111         } else {
    112           setTimeout(() => {
    113             this.plsStyleWidth = (500 * newPllsWidth / 100) + 'px'
    114             this.plcStyleLeft = (484 * newPllsWidth / 100) + 'px'
    115             this.$refs.plLoadingNum.innerHTML = newPllsWidth + '%'
    116           }, 1500)
    117         }
    118       },
    119       // 弹出层显示的时候，没有滚动条
    120       noScroll () {
    121         document.body.style.cssText = 'overflow:hidden;'
    122       },
    123       // 弹出层消失后，滚动条显示
    124       hasScroll () {
    125         document.body.style.cssText = 'overflow:auto;'
    126       },
    127       isOtherImgLoading (ele) {
    128         this.otherImgLength = $('.' + ele).length
    129         let _this = this
    130         if (this.otherImgLength > 0) {
    131           $('.' + ele).each(function () {
    132             $(this).on('load', function () {
    133               _this.otherNum = _this.otherNum + 1
    134               if (_this.otherImgLength === _this.otherNum) {
    135                 _this.otherImgLoading = true
    136               }
    137             })
    138           })
    139         } else {
    140           this.otherImgLoading = true
    141         }
    142       },
    143       isBackImgLoading (ele) {
    144         this.backImgLength = $('.' + ele).length
    145         let _this = this
    146         if (this.backImgLength > 0) {
    147           $('.' + ele).each(function () {
    148             $(this).on('load', function () {
    149               _this.backNum = _this.backNum + 1
    150               if (_this.backImgLength === _this.backNum) {
    151                 _this.backImgLoading = true
    152               }
    153             })
    154           })
    155         } else {
    156           this.backImgLoading = true
    157         }
    158       }
    159     }
    160   }
    161 </script>
    162 
    163 <style>
    164   .plLoading{
    165     width: 100%;
    166     height: 100%;
    167     position: absolute;
    168     left: 0;
    169     top: 0;
    170     z-index: 100;
    171     background-color: #00101d;
    172   }
    173   .plLoadingContent{
    174     width: 500px;
    175     height: 220px;
    176     position: absolute;
    177     margin: 0 auto;
    178     top: 50%;
    179     left: 50%;
    180     margin-top: -110px;
    181     margin-left: -250px;
    182   }
    183   .plLoadingLogo{
    184     height: 60px;
    185   }
    186   .plLoadingCon{
    187     width: 500px;
    188     height: 16px;
    189     margin-top: 100px;
    190     border-radius: 8px;
    191     background-color: #222222;
    192   }
    193   .plLoadingShow{
    194     transition: width .5s;
    195     height: 16px;
    196     border-radius: 8px;
    197     background-color: #0062b2;
    198     position: absolute;
    199   }
    200   .plLoCir{
    201     transition: left .5s;
    202     position: absolute;
    203     width: 16px;
    204     height: 16px;
    205     border-radius: 8px;
    206     background-color: #0062b2;
    207     box-shadow: 0 0 20px #008cff;
    208   }
    209   .plLoadingNum{
    210     font-size: 14px;
    211     color: #0062b2;
    212     margin-top: 20px;
    213   }
    214   .displayNone{
    215     display: none;
    216   }
    217 </style>

[https_icons8.com_preloaders]: https://icons8.com/preloaders/