关于网页载入,页面顶部显示页面加载线性进度条效果实现。

今早早逛淘宝的时候突然发现淘宝每次在点击进入下页的时候的页面顶部就会出现页面载入进度效果,其实之前在访问好多国外的网站的时候也见过这样的效果,突然一时兴起想要知道如何实现。

如图所示:

关于网页载入,页面顶部显示页面加载线性进度条效果实现。_第1张图片

然后就百度一下,竟然找到了两款插件,。

插件一:LoadingBar

LoadingBar.js的地址是:http://www.onextrapixel.com/2013/09/02/loadingbar-js-adding-a-youtube-like-loading-bar-to-your-website/

插件二:NProgress.js
NProgress.js的地址是:http://ricostacruz.com/nprogress/

这里只介绍NProgress.js调用方法,第一个自己去琢磨吧。

关于网页载入,页面顶部显示页面加载线性进度条效果实现。_第2张图片

根据英文翻译(英语水平太渣翻译不对见谅):

第一个方法是开始进度
第二个方法是设置百分比
第三个方法是设置增量
第四个方法是结束进度

具体调用demo:


<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>NProgress: slim progress bars in JavaScripttitle>
  <link href='support/style.css' rel='stylesheet' />
  <link href='nprogress.css' rel='stylesheet' />
  <meta name="viewport" content="width=device-width">  
  <script src="https://code.jquery.com/jquery-1.11.2.min.js">script>
head>

<body>

body>
html>
<script src='nprogress.js'>script>
<script>
    NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
 script>

这里要注意的时候

<script>
    NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
 script>

这里代码一定要放到底部执行,切在引入NProgress脚本后,如果放到header里面则不会得到想要的效果。一开始我也陷入坑里面了。

运行效果如下:

关于网页载入,页面顶部显示页面加载线性进度条效果实现。_第3张图片

结束语:先这样了。准备抢国庆回来的票…….

你可能感兴趣的:(web前端,javascript)