自己动手制作基于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 相关文章推荐
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
JS检测图片大小的实例
2013/08/21 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
TypeScript入门-接口
2017/03/30 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
React手稿之 React-Saga的详解
2018/11/12 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
python编程实现希尔排序
2017/04/13 Python
python http接口自动化脚本详解
2018/01/02 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Python控制台实现交互式环境执行
2020/06/09 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
高三自我鉴定范文
2013/10/19 职场文书
工商企业管理应届生求职信
2013/11/03 职场文书
大型活动策划方案
2014/01/12 职场文书
爱护草坪标语
2014/06/24 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
2019年最新借条范本!
2019/07/08 职场文书
七年级作文之下雨天
2019/12/23 职场文书
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js