原标题：网页加载进度条实现方案

这次源码时代H5学科老师跟大家一起来总结下在web应用中常见的加载进度条实现方案。

随着html5的普及，各种css3动画及js特效在网页中也是层出不穷，PC端加载数据的速度还是比较快的，但是对于移动端设备而言则相对要慢不少，如果图片或者脚本没有加载完，用户在操作中就可能发生各种问题，因此我们需要对数据加载进行侦测，以更加人性化的方法将网页程序内容展现给用户，实现更佳的用户体验。

先说一下整体的实现思路吧，常见的效果是将进度条的dom结构显示在页面最“前”(使用fixed定位 + 高z-index，提高优先级)，主体内容相当于是被“隐藏”(实际是被遮盖)了，所以进度条一打开网页就有了，当网页内容全部加载完成后，触发js相关事件，执行回调函数：隐藏进度条的同时显示页面主体内容。

【1. 定时器模拟制作进度条】

很多同学会使用定时器的方式实现网页进度条，通常可以设置延迟3到5秒钟的时间后来显示网页内容，这样的确可以模拟出进度条的加载效果，不过这种方式会有一些问题，比如当前页面已经打开过了，浏览器中会有缓存数据，再次开启页面定时器依然会执行，反而会影响加载性能，原本可以“瞬间”完成的内容加载，现在由于定时器的原因也需要等待。还有一个就是在网络情况比较糟糕的情况下，很有可能3到5秒钟的时间也未必能够加载完成网页内容，这个时候定时器加载又显得比较鸡肋了。

示例代码参考：load1.html

样式：

*{

margin: 0;

padding: 0;

}

#Loading{

position: fixed;

width: 100%;

height: 100%;

background-color: orange;

color: #fff;

font-size: 40px;

text-align: center;

line-height: 10;

}

结构：

交互：

<>

var load_page = document.querySelector("#Loading");

setTimeout(function(){

load_page.style.display = "none";

}, 3000)

>

小结：

1. 定时器模拟制作进度条只能是视觉表现上的实现，而非真正意义上的解决方案。

【2. 通过加载状态事件制作进度条】

javascrip提供了相关事件机制可以监控页面的加载情况，我们可以通过加载状态事件实现进度条的制作，可以使用window.事件，等到页面中全部内容包括图片加载完成后才会被触发，或者使用document.onReadyStateChange事件，在ReadyStateChange事件中可通过自变量事件参数获取到页面加载的当前状态，分为5项内容：

Uninitialized：未初始化

Loading：载入

Loaded：载入完成

Interactive：交互

Completed：完成

而js通过ReadyStateChange事件可以获取到的仅为后2项状态，不过对于我们的代码实现而言仅仅只需要最后一个完成状态即可。

示例代码参考：load2.html(样式代码同load1.html)

结构：

交互：

<>

var load_page = document.querySelector("#Loading");

document.onreadystatechange = function(e){

if(e.target.readyState === "complete"){

load_page.style.display = "none";

}

}

>

小结：

1. 通过加载状态事件(window.或document.onreadystatechange)制作进度条，可真正意义上实现页面加载效果。

【3. 实时获取加载数据制作进度条】

通过加载状态事件制作进度条，可真正意义上实现页面加载效果，但是无法显示当前加载进度，当内容加载完成后直接就显示出了落地页，过程中缺少了加载进度提示，实际上对于网页而言加载图片之类的二进制资源文件是最大的加载开销，所以通常来讲图片资源往往是最后加载完成的，其加载行为本身又是异步的，所以我们可以通过图片自身的load事件判定其是否加载完成，执行回调函数实时计算加载进度，模拟实时获取加载数据进度条效果。

示例代码参考：load3.html(样式代码同load1.html)

结构：

交互：

<>

var load_page = document.querySelector("#Loading"),

h2 = document.querySelector("h2"),

imgs = document.querySelectorAll("img"),

imgs_len = imgs.length,

loaded = 0,

load_callback = function(){

loaded++;

h2.innerHTML = parseInt(loaded/imgs_len*100) + "%";

if(loaded === imgs_len) load_page.style.display = "none";

};

for(var i=0; i

if(imgs[i].complete == true){//图片已加载完成

load_callback();

}else{

imgs[i]. = function(){//图片动态加载完成触发

load_callback();

}

}

}

>

网站资源扩展：

1. 动画图标资源：www.loading.io

2. GIF预加载图标资源：www.preloaders.net

感谢源码时代H5学科讲师提供此文章！

本文为原创文章，转载请注明出处(http://www.itsource.cn)！返回搜狐，查看更多

责任编辑：