专栏首页河湾欢儿的专栏常见的网页加载进度条

常见的网页加载进度条

我们为什么要做网页加载进度条? 是为了让用户的等待不再枯燥,让用户有一个等待的目标. 为什么要页面加载? 这些网站打开后网页上面需要加载一些控件以使网页上的一些程序能够执行,从而显现出相应的效果,如在线播放的视频、FLASH都属于这种情况,不同的效果对应的不同运行程序,这些运行程序你要看是哪里开发的,有些是安全的,比如一些大家都知道的,像FLASH或者REAL的,但所有这些实际上都是要求在你的计算机上面下载并[执行程序],原则上都是不安全的。

我们先用一个定时器做一个页面加载(缺点:页面加载时间是死的,无法根据内容多少来判断是否要加载多长时间!!)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定时器</title>
        <script type="text/javascript" src="css/jquery1.js">
            
        </script>
        
        <style type="text/css">
            *{
                margin: 0;
                padding: 0     ;
            }
            .loading{
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                background: white;
            }
            .loading .pic{
                width: 64px;
                height: 64px;
            
                background: url("images/25.gif");
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            img{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <div class="loading">
        <div class="pic">
            
        </div>
    </div>
    <body>
    ![](图片)![](图片)![](图片).....
        <script type="text/javascript">
            $(function(){
                setInterval(function(){
                    $(".loading").fadeOut();
                },3000)
            })
        </script>
    </body>
</html>

用一个简单的js代码来做一个页面加载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>进度条</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0     ;
            }
            .loading{
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                background: white;
            }
            .loading .pic{
                width: 64px;
                height: 64px;
            
                background: url("images/25.gif");
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            img{
                width: 100%;
                height: 100%;
            }
        </style>
        <script type="text/javascript" src="css/jquery1.js"></script>
        <script type="text/javascript">
            //document.onreadystatechange页面加载状态改变时的事件    
            document.onreadystatechange=function(){
                if(document.readyState=="complete");{
                    $(".loading").fadeOut();
                }
                
            }
        </script>
    </head>
    <body>
        <div class="loading">
            <div class="pic">
                ![](images/25.gif)
            </div>
        </div>
        ![](图片)![](图片)![](图片).....
    </body>
</html>

接下来教大家做一个定位在头部的进度条

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        
            .loading{
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                background: white;
            }
            .loading .pic{
                width: 0%;//起始是0
                height: 5px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: red
            }
            
        </style>
        <script type="text/javascript" src="css/jquery1.js"></script>
    </head>
    <body>
        <div class="loading">
            <div class="pic">
                
            </div>
        </div>
     <header>
            ![](图片)![](图片)![](图片).....
     </header>
     <script type="text/javascript">
        $(".loading .pic").animate({width:"10%"},100) //每加载一个内容就运行一次js  
     </script>
     <banner>
        ![](图片)![](图片)![](图片).....
     </banner>
     <script type="text/javascript">
        $(".loading .pic").animate({width:"40%"},100)
     </script>
     <section>
            ![](图片)![](图片)![](图片).....
     </section>
     <script type="text/javascript">
        $(".loading .pic").animate({width:"70%"},100)
     </script>
     <div class="main">
            ![](图片)![](图片)![](图片).....
     </div>
     <script type="text/javascript">
        $(".loading .pic").animate({width:"100%"},100,function(){
            $(".loading").fadeOut();//运行完成 隐藏进度条
        }
        )
     </script>
    </body>
</html>

实时获取加载数值的进度条

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实时获取</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .loading{
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                background: white;
            }
            .loading .pic{
                width: 0%;
                height: 5px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                background: palegreen;
                font-size: 30px;
                text-align:center;
                line-height: 100px;
            }
            .loading .pic span{
                display: block;
                width: 80px;
                height: 80px;
                position: absolute;
                top: 10px;
                left: -10px;
                box-shadow: 0 3px 0 #666 ;
                border-radius: 50%;
                animation:rotate 1s infinite linear ;
            }
            @keyframes rotate{
                0%{
                    transform: rotate(0deg);
                }
                100%{
                    transform: rotate(360deg);
                }
            }
            img{
                width: 100%;
                height: 100%;
            }
        </style>
        <script type="text/javascript" src="css/jquery1.js"></script>
        <script>
            $(function(){
                var img=$("img");
                var num=0;
                img.each(function(i){
                    var oImg=new Image();
                    oImg.onload=function(){
                        oImg.onload=null;//清除图片多次请求
                        num++;
                        //获取数值并将数值显示出来
                        $(".loading b").html(parseInt(num/$("img").size()*100)+"%");
                        if(num>=i){
                            $(".loading").fadeOut();
                        }
                    }
                    oImg.src=img[i].src;
                })
            })
        </script>
    </head>
    <body>
        <div class="loading">
            <div class="pic">
                <span id="">
                    
                </span>
                <b>0%</b>
            </div>
        </div>
              <img src=“”图片“”>
              <img src=“”图片“”>
              <img src=“”图片“”>
            <img src=“”图片“”>
            <img src=“”图片“”>
            <img src=“”图片“”>
            <img src=“”图片“”>
    </body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SQL中GROUP BY用法示例

    GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

    Awesome_Tang
  • 儿童创造力教育与编程教育的碰撞——MIT雷斯尼克教授最新理论梗概

    儿童编程教育已经在我国各一线二线城市疯狂出现,颇有“烂大街”的趋势。我们不禁要问很多很多问题:

    一石匠人
  • 一张图理清《梅花易数》梗概

    学《易经》的目的不一定是为了卜卦,但是了解卜卦绝对能够让你更好地了解易学。今天用一张思维导图对《梅花易数》的主要内容进行概括,希望能够给学友们提供帮助。

    一石匠人
  • 什么样的人生才是有意义的人生——没有标准的标准答案

    【导读】其实我们可以跳出这个小圈圈去更加科客观地看一下这个世界。在夜晚的时候我们仰望天空,浩瀚的宇宙中整个地球只是一粒浮尘,何况地球上一个小小的人类?在漫长的历...

    一石匠人
  • 《动物魔法学校》儿童学编程Scratch之“外观”部分

    导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

    一石匠人
  • 我不是算命先生,却对占卜有了疑惑——如何论证“占卜前提”的正确与否

    事出有因,我对《周易》感兴趣了很多年。只是觉得特别有趣,断断续续学习了一些皮毛。这几天又偶然接触到了《梅花易数》,觉得很是精彩,将五行八卦天干地支都串联了起来。...

    一石匠人
  • 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

    haifeiWu
  • 天干地支五行八卦的对应关系

    一石匠人
  • 声音功能让儿童编程更有创造性

    导读:Scratch中声音功能非常强大,除了常规的音效,你甚至可以模拟各种乐器的各个发音、设置节拍、休止……如果你愿意,甚至可以用它创作一个交响乐。我们可以引导...

    一石匠人
  • 【系统设置】CentOS 修改机器名

    ken.io

扫码关注云+社区

领取腾讯云代金券