快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏)
發(fā)布時間：2020-02-25 15:45:18 作者：沒有確定的名字 
我要評論
我要評論這篇文章主要介紹了快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏),本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
問題解說:
在使用css 的animations 屬性時,首次加載循環(huán)會出現(xiàn)白色的間隙,看著有點(diǎn)像頁面有刷新的感覺,后面每次循環(huán)就不會再有這個問題
問題演示
//html
<div class="container">
<div class="first"> </div>
</div>
//less
.container {
width: 100vw;
height: 100%;
}
.container .first {
width: 100vw;
height: 100vh;
animation: bgmove 10s infinite;
}
@keyframes bgmove {
0% {
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") no-repeat center center;
background-size: cover;
opacity: 1;
}
15% {
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") no-repeat center center;
opacity: 1;
background-size: cover;
}
30% {
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg") no-repeat center center;
opacity: 1;
background-size: cover;
}
45% {
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg") no-repeat center center;
opacity: 1;
background-size: cover;
}
60% {
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg") no-repeat center center;
opacity: 1;
background-size: cover;
}
80% {
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") no-repeat center center;
opacity: 1;
background-size: cover;
}
100% {
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") no-repeat center center;
background-size: cover;
opacity: 1;
}
}
解決辦法
//less
.container {
width: 100vw;
height: 100%;
}
.container .first {
width: 100vw;
height: 100vh;
background:url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-1.jpg"),
url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-1\_1.jpg"),
url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-2\_1.jpg"),
url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-4\_1.jpg"),
url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-5\_1.jpg"),
url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-1\_1.jpg");
animation: bgmove 10s infinite;
}
@keyframes bgmove {
0% {
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") no-repeat center center;
background-size: cover;
opacity: 1;
}
15% {
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") no-repeat center center;
opacity: 1;
background-size: cover;
}
30% {
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg") no-repeat center center;
opacity: 1;
background-size: cover;
}
45% {
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg") no-repeat center center;
opacity: 1;
background-size: cover;
}
60% {
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg") no-repeat center center;
opacity: 1;
background-size: cover;
}
80% {
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") no-repeat center center;
opacity: 1;
background-size: cover;
}
100% {
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") no-repeat center center;
background-size: cover;
opacity: 1;
}
}
最終效果
問題解析
圖片的加載一般有兩種情況, 圖片的預(yù)加載 和 圖片的懶加載 ,在這里就涉及到圖片的預(yù)加載問題,當(dāng)頁面的圖片過多的時候,服務(wù)器的壓力就會大,加載圖片一次性顯示會有不連貫所以在第一次將所有的圖片都加載下來,這樣后面在使用這些圖片的時候就是緩存在本地的資源,加載速度也會塊很多,就不會出現(xiàn)白色斷層
到此這篇關(guān)于快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏)的文章就介紹到這了,更多相關(guān)css keyframes加載圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了詳解CSS 去掉inline-block元素間隙的幾種方法，這些間隙會導(dǎo)致一些布局上的問題，需要把間隙去掉。非常具有實用價值，需要的朋友可以參考下2018-11-13- 這篇文章主要介紹了CSS圖片下面有間隙的6種解決方案,需要的朋友可以參考下2017-09-11
這篇文章主要介紹了css幾種解決inline-block間隙的方案(整理),具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-16css解決display:inline-block;產(chǎn)生的縫隙（間隙）的方法
本篇文章主要介紹了css解決display:inline-block;產(chǎn)生的縫隙（間隙）的方法，具有一定的參考價值，有需要的可以了解一下。2016-12-14- 這篇文章主要介紹了CSS清除圖片下幾像素空白間隙的方法 ,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-14
