html 实现页面加载进度,网页加载进度条实现方案

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

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

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

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

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

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

示例代码参考：load1.html

样式：

*{

margin: 0;

padding: 0;

<