JS实现网页加载进度条实例

网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果。

HTML

首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小。所以我们无法通过数据大小来实现0-100%的加载显示过程。
因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行大概的模糊进度反馈来实现进度加载的效果。大致意思是:页面每加载到指定区域,则返回(n)%的进度结果,通过设置多个节点,来达到一步一步显示加载进度的目的。
假如有一个页面,按区块分为页头、左侧内容、右边侧栏、页脚四部分,我们把这四部分作为四个节点,当页面加载每一个节点后,设置大概加载百分比,页面结构如下:
 

<div id="header"> 

页头部分 

</div> 

<div id="mainpage"> 

左侧内容 

</div> 

<div id="sider"> 

右边侧栏 

</div> 

<div id="footer"> 

页脚部分 

</div>

然后我们在<body>下的第一行加上进度条.loading。
 

<div class="loading"></div>

 

CSS

我们要设置loading进度条的样式,设置背景色,高度,以及位置,优先级等。
 
.loading{
    background:#FF6100; //设置进度条的颜色
    height:5px; //设置进度条的高度
    position:fixed; //设定进度条跟随屏幕滚动
    top:0; //将进度条固定在页面顶部
    z-index:99999  //提高进度条的优先层级,避免被其他层遮挡
}

接下来,我们要在每个节点后面加上进度动画,使用jQuery来实现。
 

<div id="header"> 

页头部分 

</div> 

<script type="text/javascript"> 

    $('.loading').animate({'width':'33%'},50);  //第一个进度节点 

</script> 

<div id="mainpage"> 

左侧内容 

</div> 

<script type="text/javascript"> 

    $('.loading').animate({'width':'55%'},50);  //第二个进度节点 

</script> 

<div id="sider"> 

右边侧栏 

</div> 

<script type="text/javascript"> 

    $('.loading').animate({'width':'80%'},50);  //第三个进度节点 

</script> 

<div id="footer"> 

页脚部分 

</div> 

<script type="text/javascript"> 

    $('.loading').animate({'width':'100%'},50);  //第四个进度节点 

</script>

 

可以看出,没加载一个节点后,jQuery调用animate()动画方法实现进度条宽度的变化,每个节点变化以50毫秒时间让进度条看起来更流畅些,最终从0%变化到100%,完成了进度条的进度动画。
当进度条达到100%后,页面加载完成,最后还有一步要做的就是隐藏进度条。
 

$(document).ready(function(){ 

    $('.loading').fadeOut();     

});

请查看演示DEMO,在DEMO页面顶部会有一个红色的进度条表示页面加载的进度。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索网页
, 浏览器
代码
js实现网页加载进度条、h5如何实现加载进度条、网页加载进度条、ios网页加载进度条、网页加载进度条代码,以便于您获取更多的相关知识。

时间: 2016-09-14

JS实现网页加载进度条实例的相关文章

jquery插件NProgress.js制作网页加载进度条

  这篇文章主要介绍了jquery插件NProgress.js制作网页加载进度条的相关资料,需要的朋友可以参考下 NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Googl

Android Webview添加网页加载进度条实例详解

推荐阅读:Android WebView线性进度条实例详解 最近在android项目中使用webview嵌套了一个抽奖活动网页,活动上线,运行良好(改了N次需求和突发bug),还好这种模式的活动,只需要修改网页,不需要重新打包发布市场,这也是这种模式开发的优势之一.后来据产品哥反馈说加载网页无进度提示,好吧,这个当时真没考虑这么多,这个要加加..想当然以为轻松搞定之....其实还是比轻松要复杂点... 1.首先自定义一个WebView控件 /** * 带进度条的Webivew * @author

jquery插件NProgress.js制作网页加载进度条_jquery

NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Google, YouTube, 和 Medium 提供灵感. 安装 依赖于 jQuery (1.8版本及以上),添加 np

js网页加载进度条代码

js网页加载进度条代码 <script LANGUAGE="JAVASCRIPT"> var timerID=null;     <!--延时变量--> var count=0;          <!--表示进度的循环变量--> var running=false;    <!--是否正在进行格式化的标志量--> function RandomNumber(max)        <!--用来产生随机数的函数--> {var

二款 js 图片预加载进度条(Mootools)

提供二款图片预加载进度条效果代码,可以对网站图片加载过慢时进行提供,这样可以增加用户体验哦,我们利用了一款js与mootools实例代码. <script> var l=0; var imgs; var sum=0; function chk(){   document.getelementbyid("aa").innertext=""+((sum-l)*100/sum)+"%"   l--;   if (l==0){     for

教您去掉ie网页加载进度条的方法_javascript技巧

这样虽没有对功能有什么影响,可是体验总不怎么好,那如何解决这个问题了,网上有很多文章都有说过在被目标页加载后设置window.status = "xx"这类的,可是我发现这个方法这样的情形下并不怎么好使. 复制代码 代码如下: <div> <ul> <li><a href="1.html" target="page"></a></li> <li><a hre

pace.js页面加载进度条插件_javascript技巧

本文简单介绍插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约.闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果),如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色! 调用方法: 引入Pace.j

Sys.ScriptLoader与JS加载进度条的实现

js|加载 今天有人问我,163邮箱那样的Javascript加载进度条是如何实现的. 我不知道,不过实现一个不难,因为<script />有onload和onreadystatechange.还有就是,我们有Atlas. Atlas中有个类:Sys.ScriptLoader,它的作用就是在页面中依次地加载多个Script文件.在实现之前,先来分析一下这个类的代码.   1Sys.ScriptLoader = function() {  2  3    // 所有Script的referenc

混合开发(一)——WebView开发高级技巧之加载网页以及JavaScript,加载进度条

混合开发(一)--WebView开发高级技巧之加载网页以及JavaScript,加载进度条 现在关于混合开发也越来越多了,很多人喜欢跟随,比如HB,比如RN,其实这东西很早就有这么一个概念了,而且说实话,这方面的需求目前来讲,还是只针对一个别的应用的,不过日后会发展成什么样,那我就不知道了,不过在此之前,我们的WebView,还是用的比较多的,包括他浏览新闻,以及加载一些动作,也就是加载JS,这样的话,我们就可以拿出来讲一讲了,说真的,学习android也挺久的了,感觉很多东西,一出来的时候都哇