自己动手制作基于jQuery的Web页面加载进度条插件


Posted in Javascript onJune 03, 2016

静态效果的实现

网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式。网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条。
大体的写法如下:

body{
        margin:0;
      }
      #progress {
        position:fixed;
        height: 2px;
        background:#2085c5;
        transition:opacity 500ms linear
      }
      #progress.done {
        opacity:0
      }
      #progress span {
        position:absolute;
        height:2px;
        -webkit-box-shadow:#2085c5 1px 0 6px 1px;
        -webkit-border-radius:100%;
        opacity:1;
        width:150px;
        right:-10px;
        -webkit-animation:pulse 2s ease-out 0s infinite;
      }

      @-webkit-keyframes pulse {
        30% {
          opacity:.6
        }
        60% {
          opacity:0;
        }
        100% {
          opacity:.6
        }
}

html代码:

<div id="progress">
      <span></span>
</div>

jquery代码:

$({property: 0}).animate({property: 100}, {
        duration: 3000,
        step: function() {
          var percentage = Math.round(this.property);

          $('#progress').css('width', percentage+"%");

           if(percentage == 100) {
              $("#progress").addClass("done");//完成,隐藏进度条
            }
        }
});

设定其持续时间是3秒钟!你可以改动一下,把3秒钟的时间改成你网页的加载时间,就可以做出网页动态加载进度条了。。

页面加载插件的实际应用及load函数的运用
关于页面的加载,很难找到一个很好的方法来获取页面的实际下载进度。下面介绍的方法是运用 $(window).load(function() {})和$(document).ready(function(){})来进行的,虽然这种方法不是很准确,但是也可以模拟网页的下载。

$(function(){
NProgress.start();
})

$(window).load(function() {
  NProgress.done();
})

有很多朋友可能对 $(window).load(function() {})和$(document).ready(function(){})的区别不是很了解。大家可以写一个小案例来测试一下!

例如:

$(window).load(function() {
  alert("我是load")
})
$(function(){
 alert("我是document.ready")
})

很明显,肯定是document.ready先执行,因为document.ready是在DOM结构载入完后执行的,不需要载入得这么“完全”,而$(window).load则是页面全部内容加载完成后执行的。

有时候,

$(window).load(function() {
  alert("我是load")
})

也可以用js的写法:

window.onload = function(){ ... }

都是在页面全部下载完成之后来执行的。两种写法是等价的!

Javascript 相关文章推荐
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
vue中 v-for循环的用法详解
Feb 19 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 #Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 #Javascript
js不间断滚动的简单实现
Jun 03 #Javascript
Ionic如何创建APP项目
Jun 03 #Javascript
Ionic快速安装教程
Jun 03 #Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 #Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 #Javascript
You might like
php学习 字符串课件
2008/06/15 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
详解Python字符串对象的实现
2015/12/24 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
pycharm快捷键汇总
2020/02/14 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
自荐信不宜过于夸大
2013/11/06 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
师范毕业生个人求职信
2013/12/09 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
茶叶生产计划书
2014/01/10 职场文书
个人委托书格式
2014/04/04 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
小学总务工作总结
2015/08/13 职场文书
教学副校长工作总结
2015/08/13 职场文书
初中语文教学反思范文
2016/03/03 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP