网页加载进度条详解（保举）

( 网页加载时，偶然内容过多，一向加载守候，而此时网页表现白色不表现任何的对象，给用户的体验相等欠好，以是，一样平常会在网页加载乐成前，会以进度条的情势，给用户举办展示。让用户可以看到动画，知道网页正在加载中)

常见的方法有以下：

1. 按时器的进度条（假的）

<script type="text/javascript"> $(function(){ var loading=‘<div class="loading"><div class="pic"></div></div>‘; $("body").append(loading); setInterval(function(){ $(".loading").fadeOut(); },3000); }); </script>

2. 真实的获取内容，实现加载进度条

要实现按照真实内容，来加载进度条，下面要先容两个常识点：

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

2.1.  可以将如上按时器的代码，修改为：

document.onreadystatechange=function(){ if(document.readyState=="complete"){ $(".loading").fadeOut(); } }

2.2.  将进度条酿成css的小动画举办表现

保举网站： https://preloaders.net/ 此网站有各类暗示加载的小动画 

 在线给css添加前缀 

https://loading.io/ 进度条小动画 

2.3： 定位在头部的进度度,如下图：

注：此实现，也并未是真实的表现出加载的进度，而是操作：代码从上到下执行的原则
在代码的差异位置，改变线条的宽度，在页面的最后，让宽度为100%来实现。

如下图：

2.4 及时获取加载数据的进度条

成立图像工具：图像工签字称= new  Image();
行使:onload变乱
注：src属性必然要写到onload的后头，不然措施在IE中会堕落 
 

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!