正文

页面进度条

小数点就是问题  小数点就是问题  2022-08-18  284

关键词：

从很早之前就想知道页面的进度条是怎么实现的了，但发现好像不是自己想要的，不是就是不会，是什么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>

网页加载进度条的实现

本次主要介绍一下网页加载进度的实现。如下图，在页面加载的时候，上方红色的进度条网页加载进度的好处是能够更好的反应当前网页的加载进度情况，loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是... 查看详情

android webview中的进度条

...droidwebview中添加进度条。它显示进度条，文本（加载）和页面的其余部分只是一个空白页面。我想在加载下一页时保留当前页面，并在当前页面顶部显示进度条，这样用户就不必看到空白的加载页面..有人可以帮我解决这个问题... 查看详情

利用原生javascript实现进度条（可做页面头部进度条，或者局部进度条均可）

1<divclass="top-progress"id="js-top-progress"></div>2<scriptsrc="./static/js/progress.js"></script>3<scripttype="text/javascript">4varp=myProgress.c 查看详情

前端页面加载进度条的制作

参考技术A我们在前端页面开发过程中，经常会遇到图片，音频，视频等加载慢问题。这样对用户体验来说体验是很不好的。因此我们可以在页面加载时用一个加载动效来表示，当加载完成的时候，再来显示内容。推荐一个制作... 查看详情

jQuery进度条加载直到页面重定向

】jQuery进度条加载直到页面重定向【英文标题】：jQueryprogressbarloaduntilpageredirects【发布时间】：2015-10-0504:32:34【问题描述】：我有一个包含一些附属链接的网站，当点击链接时，用户会被带到我网站上的一个临时页面，这个页面... 查看详情

AngularJS - 进度条为 100% 后重新加载页面 5 秒

】AngularJS-进度条为100%后重新加载页面5秒【英文标题】：AngularJS-Reloadpage5secondsonceprogressbaris100%【发布时间】：2019-10-1801:38:26【问题描述】：我想在进度条达到100%后5秒后重新加载页面我的代码是：<!DOCTYPEHTML><!--/**jQueryFileUp... 查看详情

vue项目实战61添加页面加载进度条效果(代码片段)

...效果就是，当我们点击每一个菜单，加载相应的页面时，在页面顶部中间会有一个加载的蓝色条条，随着页面的加载向右侧移动：我们要为所有的页面加载效果添加这种进度条效果。二、如何查看详情

复选框生成的进度条出现在不同的页面中

】复选框生成的进度条出现在不同的页面中【英文标题】：Progressbargeneratedbycheckboxestoappearindifferentpages【发布时间】：2016-05-2019:45:09【问题描述】：伙计们！如果这个问题重复其他问题，我深表歉意，但我找不到任何解决方案，... 查看详情

unity_加载页面及进度条(代码片段)

就是其他主页点击按钮后先跳转到这个加载页面场景，同时异步加载要跳转到的场景参考：UnitySceneManager场景管理Chinar详解APIUnity场景异步加载（加载界面的实现）新建一个加载页面场景创建一个滑动条用来表示进... 查看详情

如何使用 Materialise 线性不确定进度条作为页面预加载器？

】如何使用Materialise线性不确定进度条作为页面预加载器？【英文标题】：HowtousetheMaterializelinearindeterminateprogressbarasapagepreloader?【发布时间】：2020-05-2316:36:15【问题描述】：我在个人项目中使用MaterializeFramework，我想创建一个加... 查看详情

我优化了进度条，页面性能竟提高了70%(代码片段)

Part1前言给大家分享一下这个思路极好的进度条组件，同时它也存在非常严重的性能问题，本文末尾也会讲解一下问题所在以及优化方式。Part2进度条的应用场景一般进度条组件都出现在类似抖音播放视频的这样场景中... 查看详情

进度条

...下大神教给我的知识。我们通过document.onreadystatechange判断页面是否加载完。document.onreadystatechange 页面加载状态改变时的事件document.readyState 查看详情

简洁大气带进度条的url跳转页面html源码

简介：简洁大气带进度条的URL跳转页面HTML源码可用于网站内链接跳转,或者广告链接跳转网盘下载地址：http://nb8.net/smTgTV0QtPF0图片：查看详情

进度条加载后显示页面

...片，在内层DIV中引入加载时显示的图片，让内层DIV居中在页面上，利用setInterval定时器设置3秒后将外层DIV隐藏，从而显示图片，达到加载完后显示页面的效果。 <!DOCTYPE html> <html> 查看详情

动画进度条以显示网页的进度

...ofwebpage【发布时间】：2013-08-1202:20:56【问题描述】：我的页面顶部有一个进度条，我希望该条显示网页加载的进度。当整个页面加载时，我希望栏显示100%。我很确定我需要列出一个变量\'$(window).load();\'但我不确定在哪里。我的... 查看详情

用jquery实现页面loading的效果，即：当页面加载完成前显示loading的进度条，全部加载完成之后进度条消失

...的加载进度是真实的，他的进度条是可以反映当前未加载页面的剩余内容的---其实这种方法也挺好....不过一般情况下没什么必要吧，如果要做成这样的，用flex更好)。一楼的方法不是正确的。如果简单地放一个loading图片在页面... 查看详情

nprogress页面加载进度条vue插件片

入口文件,main.js引入nprogressimportAppfrom‘./App‘importVueRouterfrom‘vue-router‘importrouterfrom‘./router‘//你的路由文件//引入nprogressimportNProgressfrom‘nprogress‘import‘nprogress/nprogress.css‘//这个样式必须引入Vue.use( 查看详情

学习|css3实现进度条加载

进度条加载是页面加载时的一种交互效果，这样做的目的是提高用户体验。进度条的的实现分为3大部分：1、页面布局，2、进度条动效，3、何时进度条增加。文件目录加载文件顺序<linkrel="stylesheet/less"href="./index.less"><script... 查看详情