页面进度条

Posted 小数点就是问题

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面进度条相关的知识，希望对你有一定的参考价值。

从很早之前就想知道页面的进度条是怎么实现的了，但发现好像不是自己想要的，不是就是不会，是什么flash的AS3里的

方法实现获取页面加载的进度，要不就是别的，这些都是未知的领域啊，不懂，然而html5也有这样获取文件大小的方法，

但没有进入深究，所以也暂时不能全面了解，但可以在已经的知识上完成这个效果，就是onload事件，页面上都是图片拖慢

页面加载进度而降低性能，不是就是JS文件过大，那么我们能就从这两个角度去把页面进度条完成了？

以下就是从onload这个方法实现页面进度条。

材料：

loading2

loading3

loading4

loading5

 

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .loading{
            width: 120px;
            height: 140px;
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -60px;
            margin-top: -70px;    
        }
        .load{
            width: 120px;
            height: 100px;
            background: url(./img/loading3.png) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            animation: allMove 0.6s forwards infinite alternate linear;
        }
        @keyframes allMove{
            from{
                transform: trasnlateY(0)
            }to{
                transform: translateY(7px);
            }
        }
        .load .loadIcon01{
            width: 120px;
            height: 100px;
            background: url(./img/loading4.png) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            animation: move 1s forwards infinite linear;
        }
        @keyframes move{
            from{
                transform: rotate(0);
            }to{
                transform: rotate(-360deg);
            }
        }
        .load .loadIcon02{
            width: 120px;
            height: 100px;
            background: url(./img/loading5.png) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            animation: move02 1s infinite forwards linear;
        }
        @keyframes move02{
            from{
                transform: rotate(0);
            }to{
                transform: rotate(360deg);
            }
        }
        .load .loadText{
            position: absolute;
            top: 0;
            left:0;
            width: 100%;
            text-align: center;
            line-height: 100px;
            color: #f9725c;
            font:bold 16px/100px Arial;
        }
        .loadShadow{
            position: absolute;
            bottom: 0;
            left: 0;
            background: url(./img/loading2.png) no-repeat;
            height: 40px;
            width: 100px;
            animation: move03 1s infinite forwards linear;
        }
        @keyframes move03{
            from{
                transform: scale(1);
                opacity: 1;
            }to{
                transform: scale(0.8);
                opacity: 0.9;
            }
        }
    </style>
</head>
<body>
    <div class="loading">
        <div class="load">
            <div class="loadIcon01"></div>
            <div class="loadIcon02"></div>
            <div class="loadText">0%</div>
        </div>
        <div class="loadShadow"></div>
    </div>
    <!-- 实现页面加载进度条，如果js文件过大，要使用动态的加载来获取js加载成功是否
    或使用异步加载的方式，一般网页的加载都是图片过大影响性能，所以判断图片加载完没有
    就可以了
-->
<script>
         /*var oHead=document.querySelector("head");
         var oScript=document.createElement("script");
         oScript.src="jquery-1.8.3.js";
         oHead.appendChild(oScript);
         oScript.onload=function(){
             alert("done");
         }*/

         /*图片实现页面进度条*/
         var oload=document.querySelector(".load");
         var oloadIco1=document.querySelector(".loadIcon01");
         var oloadIco2=document.querySelector(".loadIcon02");
         var oLoadtext=document.querySelector(".loadText");
         var aImg=["http://g.hiphotos.baidu.com/image/pic/item/0823dd54564e92589f2fe1019882d158cdbf4ec1.jpg","http://b.hiphotos.baidu.com/image/pic/item/5d6034a85edf8db1c26bda640b23dd54564e746c.jpg","http://e.hiphotos.baidu.com/image/pic/item/8b13632762d0f7031db73fdc0afa513d2697c5ad.jpg","http://g.hiphotos.baidu.com/image/pic/item/1ad5ad6eddc451da7f05e1efb4fd5266d11632c7.jpg"];
         var count=0;
         for(var i=0;i<aImg.length;i++){
             var oImg=new Image();
             oImg.src=aImg[i];
             oImg.onload=function(){
                 count++;
                 oLoadtext.innerHTML=count/aImg.length*100+"%";
                 if(count==aImg.length){
                     oload.style.animationPlayState="paused";    
                     oloadIco1.style.animationPlayState="paused";    
                     oloadIco2.style.animationPlayState="paused";
                     /*加载完成跳转页面*/
                     /*code****************/    
                 }
             }
             /*图片出错的处理*/
             oImg.onerror=function(){
                 count++;
                 oLoadtext.innerHTML=count/aImg.length*100+"%";
                 /*处理代码*/
                 /*****code*****/
                 if(count==aImg.length){
                     oload.style.animationPlayState="paused";    
                     oloadIco1.style.animationPlayState="paused";    
                     oloadIco2.style.animationPlayState="paused";
                     /*加载完成跳转页面*/
                     /*code****************/        
                 }
             }
         };
     </script>
    </body>
    </html>

 

以上是关于页面进度条的主要内容，如果未能解决你的问题，请参考以下文章

自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度？

在recyclerview片段Reandroid中屏幕旋转后进度条不显示

css Bootstrap 3进度条片段

进度条不隐藏是当数据在片段中的recyclerview中加载时

用于 onActivityCreated 中通用图像加载器的片段中进度条的 NullPointerException

如何使用 asynctask 执行数据库操作来实现进度条？