网页加载进度条的实现

关键词：

本次主要介绍一下网页加载进度的实现。如下图，在页面加载的时候，上方红色的进度条

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

首先我们要知道的是，目前没有任何浏览器可以直接获取正在加载对象的大小。所以我们无法通过数据大小来实现0-100%的加载显示过程。

因此我们需要通过html代码逐行加载的特性，在整页代码的若干个跳跃行数中设置节点，进行大概的模糊进度反馈来实现进度加载的效果。大致意思是：页面每加载到指定区域，则返回(n)%的进度结果，通过设置多个节点，来达到一步一步显示加载进度的目的。

假如有一个页面，按区块分为页头、左侧内容、右边侧栏、页脚四部分，我们把这四部分作为四个节点，当页面加载每一个节点后，设置大概加载百分比，页面结构如下：

<div id="header"> 
页头部分 
</div> 
<div id="mainpage"> 
左侧内容 
</div> 
<div id="sider"> 
右边侧栏 
</div> 
<div id="footer"> 
页脚部分 
</div> 

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

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

我们要设置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();     
}); 

最后推荐2个jquery加载进度条插件:

nprogress
pace

参考文章 http://www.helloweba.com/view-blog-322.html

查看更多内容，请访问 https://www.aaz5.com

android中webview怎么实现网页加载时显示加载进度？

android中只需要给webView注册一个事件即可实现加载进度。以下是具体实现代码：1.从webView中获取设置 WebSettingssws=webView.getSettings(); sws.setSupportZoom(true); sws.setBuiltInZoomControls(true); webView.setInitialScale(25); webView.getSettings().setUseWideViewP... 查看详情

笔记canvas图片预加载及进度条的实现

/*star*loading模块*实现图片的预加载，并显示进度条*参数：图片数组对象，加载完成的回调函数*/functionloadImages(sources,callback){varloadedImages=0;varnumImages=0;ctx.font=‘14pxbold‘;ctx.lineWidth=5;varclearWidth=canvas.width;varclearHeigh 查看详情

前端页面加载进度条的制作

...在前端页面开发过程中，经常会遇到图片，音频，视频等加载慢问题。这样对用户体验来说体验是很不好的。因此我们可以在页面加载时用一个加载动效来表示，当加载完成的时候，再来显示内容。推荐一个制作进度条的网站ico... 查看详情

网页加载进度条

(网页加载时，有时内容过多，一直加载等待，而此时网页显示白色不显示任何的东西，给用户的体验相当不好，所以，一般会在网页加载成功前，会以进度条的形式，给用户进行展示。让用户可以看到动画，知道网页正在加载... 查看详情

第七章文本进度条的实现(代码片段)

文本进度条大家都见过程加载的时候的文本进度条进度条的原理是什么呢？1、采用字符串方式打印可以动态变化的文本进度条2、进度条需要能在一行中逐渐变化问题分析：如何获取一个文本进度条的变化时间呢？1、采用sleep()... 查看详情

一个kvo实现wkwebview加载进度条的例子（注意最后移除观察者）(代码片段)

////OpenWebViewController.m//Treasure////Createdby蓝蓝色信子on16/7/29.//Copyright?2016年GY.Allrightsreserved.//#import"ZTOpenWebViewController.h"#import<WebKit/WebKit.h>@interfaceZTOpenWebViewControll 查看详情

带有进度条的按钮 android

...进度条的自定义按钮。按钮应该有两种状态：正常和正在加载。在正常状态下它应该显示一个文本，而在加载状态下它应该显示一个居中的圆形进度指示器而不是文本！当按钮状态返回“正常”状态时，它应该再次显示文本。为... 查看详情

android中webview怎么实现网页加载时显示加载进度

...A可以在第一次加载进度达到百分之百时重新加载里一个网页，使用标识可以判断第一次加载，WebView中方法获取加载进度。。。本回答被提问者采纳 查看详情

libgdx之assetmanager资源管理器及进度条的实现

概述在前面我们用到的游戏资源，是直接加载的，由于只是一个demo，资源比较少，因此看不出时间用到的长短。实际上我们在游戏开发过程中用到的图片，声音等资源比较多，这时加载游戏过程中会出现... 查看详情

学习|css3实现进度条加载

进度条加载是页面加载时的一种交互效果，这样做的目的是提高用户体验。进度条的的实现分为3大部分：1、页面布局，2、进度条动效，3、何时进度条增加。文件目录加载文件顺序<linkrel="stylesheet/less"href="./index.less"><script... 查看详情

如何使用 Swing Timer 来延迟进度条的加载

】如何使用SwingTimer来延迟进度条的加载【英文标题】：HowtousetheSwingTimertodelaytheloadingofaprogressbar【发布时间】：2013-03-1802:47:34【问题描述】：我需要找到一种方法来使用带有进度条的摇摆计时器。我尝试使用Thread.sleep()，但是当... 查看详情

libgdx之assetmanager资源管理器及进度条的实现

概述在前面我们用到的游戏资源，是直接加载的，由于只是一个demo，资源比较少，因此看不出时间用到的长短。实际上我们在游戏开发过程中用到的图片，声音等资源比较多，这时加载游戏过程中会出现... 查看详情

使用 Glide 库设置完成图像加载后进度条的可见性

】使用Glide库设置完成图像加载后进度条的可见性【英文标题】：SetvisibilityofprogressbargoneoncompletionofimageloadingusingGlidelibrary【发布时间】：2014-11-2103:52:30【问题描述】：您好，我想要一个图像进度条，它会在图像加载时显示，但是... 查看详情

用于 onActivityCreated 中通用图像加载器的片段中进度条的 NullPointerException

】用于onActivityCreated中通用图像加载器的片段中进度条的NullPointerException【英文标题】：NullPointerExceptionforprogressbarinfragmentforUniversalImageLoaderinonActivityCreated【发布时间】：2014-08-1300:08:40【问题描述】：我遇到了无法诊断的奇怪NPE。... 查看详情

如何实现带有进度条的启动画面？ - 安卓

】如何实现带有进度条的启动画面？-安卓【英文标题】：Howtoimplementasplashscreenwithaprogressbar?-android【发布时间】：2012-06-1722:46:32【问题描述】：我在启动时有一个启动画面。使用以下编码publicclassSplashextendsActivity@Overrideprotectedvoido... 查看详情

求linuxqtdesigner进度条的具体实现

参考技术A进度条QProcessBarbar;bar.setRange(0,10000);//设置进度条范围然后你需要在你执行某项长时间操作的地方for(inti=0;i<10000;i++)//做你该做的事情bar.setValue(i);//设置进度条的当前进度值,只能在范围内//一般来说这样就会自动进度增... 查看详情

Adobe Flash Builder：如何制作带有进度条的 SWF 用于加载自身？

】AdobeFlashBuilder：如何制作带有进度条的SWF用于加载自身？【英文标题】：AdobeFlashBuilder:HowtomakeaSWFwithaprogressbarforloadingitself?【发布时间】：2021-03-0309:38:48【问题描述】：我有一个AS3项目，它的所有资产都使用[Embed]元数据标签嵌... 查看详情

css系列创建网页加载进度条

一、最简单或者明显的方式是使用定时器  1、在网页中加入布局覆盖真实网页内容  2、使用定时器确定加载所用时间的长短，其实并不是真正的加载进度实现<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF... 查看详情