                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /常用的网页加载进度条

加载时背景先消失，动画再消失，这样如何解决

发现fadeOut()之后有个问题，就是白色背景先消失，然后css3小动画才消失，这样就会显得不太友好，请问大家是怎么解决的

行走的指尖

2017-10-17

源自：常用的网页加载进度条 2-3

关注问题我要回答

1654

操作

收起

2 回答

行走的指尖提问者
2017-10-19

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style>
body{width:100%;height:100%;overflow:hidden;}
.loading{width:100%;height:100%;background:#fff;position:fixed;top:0;left:0;z-index:100;}
.pic{width:50px;height:50px;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
.pic i{display:block;height:50px;float:left;margin:0px 2px;width:6px;background:green;transform:scaleY(0.4);animation:loading 1s infinite;}
.pic i:nth-child(2){animation-delay: 0.1s}
.pic i:nth-child(3){animation-delay: 0.2s}
.pic i:nth-child(4){animation-delay: 0.3s}
.pic i:nth-child(5){animation-delay: 0.4s}
@keyframes loading{
0%,40%,100%{transform:scaleY(0.4);}
20%{transform:scaleY(1);}
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
document.onreadystatechange = function(){
if(document.readyState == "complete"){
$('.loading').fadeOut(1000);
}
}
</script>
</head>
<body>
<div>
<div>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508211101547&di=2901a8f1cc1089987b10ad710c2511a9&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F09fa513d269759eea79bc50abbfb43166c22df2c.jpg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508211128910&di=767d7013b5ff88389ed7442c4bf1f315&imgtype=0&src=http%3A%2F%2F10wallpaper.com%2Fwallpaper%2Fmedium%2F1402%2Fdrops_bubbles_grass-Macro_photography_wallpaper_medium.jpg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508211156981&di=22c63385398e039f0e88a1484f1bb1d2&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fdcc451da81cb39dbbf279a97d9160924aa18300f.jpg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508211182137&di=29f2ff39bf658840f9ae93a18258646c&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F50da81cb39dbb6fd493c67e70024ab18962b378f.jpg" alt="">

</body>
</html>

我有检查过逻辑，并没有发现问题，再看看老师的视频好了。