                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /常用的網頁加載進度條

加載時背景先消失，動畫再消失，這樣如何解決

發現fadeOut()之后有個問題，就是白色背景先消失，然后css3小動畫才消失，這樣就會顯得不太友好，請問大家是怎么解決的

行走的指尖

2017-10-17

源自：常用的網頁加載進度條 2-3

關注問題我要回答

1783

操作

收起

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>

我有檢查過邏輯，并沒有發現問題，再看看老師的視頻好了。