CSS3实现页面加载进度条-加载页面

君山

什么情况下会使用到页面加载进度条？

当页面中的需要加载的内容很多，用户直接进入则看不到任何内容，体验不好，这个时候就需要使用到页面加载的一个动画，在页面加载结束后再

显示主体内容。

实现页面加载进度条有哪几种方式？

一般可分为两种，

1.设置多少时间后显示页面，

2.根据页面加载的文档状态来实现

如何根据文档状态来实现？

document.onreadystatechange  页面加载状态改变时的事件document.readyState  返回当前文档状态
1.uninitialized 还未开始加载
2.loading   载入中
3.interactive  已加载，文档与用户可以开始交互
4.complete  载入完成

1. <script>
   
2.     document.onreadystatechange = function(){
   
3.         if (document.readyState === 'complete') {
   
4.             alert('页面加载完成')
   
5.         }
   
6.     }
   
7. </script>

复制代码

在页面加载完成后去掉加载动画即可。