进度条方案——精选推荐
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
进度条⽅案
说起⽤户体验,不得不提到进度条,加载页⾯时给⽤户提供⼀个实时的进度显⽰将⼤⼤降低页⾯加载过慢导致的⽤户流失,这次总结下⼏个常见的进度条实现⽅案。
1. 定时器加载loading.gif,⼤概估算页⾯加载时间,隐藏loading;
2. ⼀开始显⽰loading.gif,页⾯加载完成时隐藏loading.gif
/*
⽂档状态document.readyState:
loading:加载html阶段,尚未完成解析时
interactive:html⽂档解析完成,加载外部资源阶段时
complete:加载完成时
*/
var loading = document.getElementById('loading');
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
loading.style.display = 'none';
}
}
⼏种事件的执⾏顺序
// 测试显⽰执⾏顺序为onreadystatechange -> onready -> DOMContentLoaded -> onload
window.onload = function(){
console.log(document.readyState+'(onload)');
}
document.addEventListener('DOMContentLoaded', function(){
console.log(document.readyState+'(DOMContentLoaded)');
})
document.onready = function(){
console.log(document.readyState+'(onready)');
}
document.onreadystatechange = function(){
console.log(document.readyState+'(onreadystatechange)');
}
3. css实现loading动画
/* 新的属性要加上浏览器前缀 */
<style>
.loading{
width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;
}
.pic{
width: 60px;height: 60px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
}
i{
display: block;float:left;width: 6px;height: 60px;background: #399;margin: 0 2px;transform: scaleY(0.4);animation: load 1.3s infinite;
}
i:nth-child(2){animation-delay: 0.1s;}
i:nth-child(3){animation-delay: 0.2s;}
i:nth-child(4){animation-delay: 0.3s;}
i:nth-child(5){animation-delay: 0.4s;}
@keyframes load{
0%,40%,100%{transform: scaleY(0.4)}
20%{transform: scaleY(1)}
}
</style><div class='loading'>
<div class='pic'>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
4. 顶部loading进度条:
可以将 ’ <script>改变顶部进度宽度</script> ’ 插⼊html⽂档中,利⽤⽂档从上到下的执⾏顺序来显⽰进度条效果;
5. 根据实时数据显⽰百分⽐进度(由于⽹页加载缓慢的原因⼤多是图⽚过多过⼤导致,所以实时数据可由图⽚加载情况计算得出);
<style>
.loading{
width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;
}
.pic{
width: 100px;height: 100px;line-height: 100px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border:1px solid ccc;text-align: center;
}
span{
display: block;width: 80px;height: 80px;position:absolute;top: 10px;left: 10px;box-shadow: 0 30px 0 #666;border-radius: 50%;animation: rotate 1s infinite linear;
}
@keyframes rotate{
0%{transform: rotate(0 deg)};
100%{transform: rotate(360deg)};
}
</style>
<div class='loading'>
<div class='pic'>
<span></span>
<b>%</b>
</div>
</div>
<img src='' />
<img src='' />
<script>
$(function(){
var img = $('img');
var num = 0;
img.each(function(i){
var oImg = new Image();
oImg.onload = function(){
oImg.onload = null;
num++;
$('b').html(parseInt(num/$('img').size()*100)+'%');
if(num >= i){
$('.loading').fadeOut();
}
};
oImg.src = img[i].src;
});
})
</script>。