先展示一下已经实现的效果：

预览地址：http://dtdxrk.github.io/js-plug/LoadingBar/index.html

看到手机上的浏览器内置了页面的加载进度条，想用在pc上。

网上搜了一下，看到几种页面loading的方法：

1.在body头部加入loading元素，在body页脚写入脚本让loading元素消失。

2.基于jquery，在页面的不同位置插入脚本，设置滚动条的宽度。

简单分析一下：

第一个明显不是我想要的。

第二个要在body前加载jquery，然后还要使用到jquery的动画方法，性能肯定达不到最优的状态。

自己的解决方法：原生JS+css3

上面的方法2其实是可以使用的方法，但是我不想在页面前加载jquery，怎么办？

很简单，自己用原生的方法写一个。

给元素添加css3的动画属性，让他能在改变宽度的时候有动画效果。

transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;

在页面插入一段style，里面有元素的css和一个css3动画暂停的类

.animation_paused{

	-webkit-animation-play-state:paused;

	-moz-animation-play-state:paused;

	-ms-animation-play-state:paused;

	animation-play-state:paused;

}

然后在页面里不同的位置调用方法，设置滚动条的宽度即可，需要注意的是方法的引用要在<head></head>里

<div id="top"></div>

<script>LoadingBar.setWidth(1)</script>

<div id="nav"></div>

<script>LoadingBar.setWidth(20)</script>

<div id="banner"></div>

<script>LoadingBar.setWidth(40)</script>

<div id="main"></div>

<script>LoadingBar.setWidth(60)</script>

<div id="right"></div>

<script>LoadingBar.setWidth(90)</script>

<div id="foot"></div>

<script>LoadingBar.setWidth(100)</script>

插件源码：

/*

========================================================================

LoadingBar 页面加载进度条

@auther LiuMing

@blog http://www.cnblogs.com/dtdxrk

demo 在body里填写需要加载的进度

LoadingBar.setWidth(number)

========================================================================

*/

var LoadingBar = {

    /*初始化*/

    init:function(){

        this.creatStyle();

        this.creatLoadDiv();

    },

    /*记录当前宽度*/

    width:0,

    /*页面里LoadingBar div*/

    oLoadDiv : false,

    /*开始*/

    setWidth : function(w){

        if(!this.oLoadDiv){this.init();}

        var oLoadDiv = this.oLoadDiv,

            width = Number(w) || 100;

        /*防止后面写入的width小于前面写入的width*/

        (width<this.width) ? width=this.width : this.width = width;

        oLoadDiv.className = 'animation_paused';

        oLoadDiv.style.width = width + '%';

        oLoadDiv.className = '';

        if(width === 100){this.over(oLoadDiv);}

    },

    /*页面加载完毕*/

    over : function(obj){

        setTimeout(function(){

            obj.style.display = 'none';

        },1000);

    },

    /*创建load条*/

    creatLoadDiv : function(){

        var div = document.createElement('div');

        div.id = 'LoadingBar';

        document.body.appendChild(div);

        this.oLoadDiv = document.getElementById('LoadingBar');

    },

    /*创建style*/

    creatStyle : function(){

        var nod = document.createElement('style'),

            str = '#LoadingBar{transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;background-color:#f90;height: 3px;width:0; position: fixed;top: 0;z-index: 99999;left: 0;font-size: 0;z-index:9999999;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));}.animation_paused{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-ms-animation-play-state:paused;animation-play-state:paused;};'

        nod.type = 'text/css';

        //ie下

        nod.styleSheet ? nod.styleSheet.cssText = str : nod.innerHTML = str;

        document.getElementsByTagName('head')[0].appendChild(nod);

    }

}

【原生JS插件】LoadingBar页面顶部加载进度条的更多相关文章

  1. react封装简单的浏览器顶部加载进度条全局组件

    在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...

  2. js实现页面图片加载进度条

    //html <div id="loading" class="loading"> <div class="load"&g ...

  3. pace.js – 加载进度条插件

    这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

  4. pace.js – 网页自动加载进度条插件

    网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...

  5. js和jquery页面初始化加载函数的方法及先后顺序

    运行下面代码.弹出A.B.C.D.E的顺序:A=B=C>D=E. jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. <! ...

  6. js页面加载进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  8. 网站顶部显示预加载进度条preload.js

    网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery. ...

  9. ajax页面加载进度条插件

    下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

随机推荐

  1. CSS3中的display:grid网格布局介绍

    1.网格布局(grid): 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念: 容器和项目,如图所示: <div class="content&qu ...

  2. PHP流程控制之goto语法

    自 PHP 5.3.0 起,还可以使用 goto 来跳出循环. 在本章开始的章节,我们讲解到一个故事,王同学每周往返,但有一个特例:直线电机滑台 项目失败后或者集团临时除知除外,他就可以不再这么每周往 ...

  3. Xshell5 安装JDK

    .执行命令yum -y list java*查看可安装java版本.执行成功后可以看见如下的结果 安装java-1.8全部相关 yum install -y java-1.8.0-openjdk* 使 ...

  4. luogu T96516 [DBOI2019]持盾 可持久化线段树+查分

    因为题中的操作是区间加法,所以满足前缀相减性. 而每一次查询的时候还是单点查询,所以直接用可持久化线段树维护差分数组,然后查一个前缀和就行了. code: #include <bits/stdc ...

  5. 在运维中的shell经验总结

    来自良许Linux公众号 编写 脚本开头部分应有脚本功能说明.参数使用说明.作者姓名.创建/修改日期.版本信息,格式为: 脚本编写时,注意格式对齐,如所有的循环或者判断语句前后的语句进行对齐,以及ca ...

  6. 【转】根据Quartz-Cron表达式获取最近几次执行时间

    public static List<String> getRecentTriggerTime(String cron) { List<String> list = new A ...

  7. 机器学习---用python实现朴素贝叶斯算法（Machine Learning Naive Bayes Algorithm Application）

    在<机器学习---朴素贝叶斯分类器(Machine Learning Naive Bayes Classifier)>一文中,我们介绍了朴素贝叶斯分类器的原理.现在,让我们来实践一下. 在 ...

  8. 部署Django到云服务器（centos+nginx+mysql+uwsgi+python3）【操作篇（1）】

    开篇 笛卡尔说:"你不能教会一个人任何东西,你只能帮助他发现他自己内心本来就有的东西!" jacky能教你的,只能是经验和建议,要逆袭还得通过自己对数据的不断领悟,数据领域的技能都 ...

  9. ROS里程计的学习

    采用增量式编码器来实现odometry的计算,首先采用编码器对脉冲进行采样实现左右轮运动状态的获取,然后再利用增量式测程法得到机器人车体当前坐标系的位姿. 增量式测量法是使用从编码器采样到的数据并依据 ...

  10. Class T泛型和通配符泛型的区别

    平时看java源代码的时候,如果碰到泛型的话,我想? T K V E这些是经常出现的,但是有时想不起来代表什么意思,今天整理下: ? 表示不确定的java类型. T 表示java类型. K V 分别代 ...