Quickly solve the white gap problem (flash screen) when CSS uses @keyframes to load images for the first cycle
|
Problem explanation: When using the CSS animations property, a white gap will appear when the loop is first loaded, which looks a bit like the page is refreshing. This problem will not occur with each subsequent loop. Problem Presentation
//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;
}
}Solution
//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;
}
}Final result
Problem Analysis There are generally two situations for loading images, preloading images and lazy loading images. Here we are talking about the problem of preloading images. When there are too many images on a page, the server will be under great pressure. Loading images at one time will cause discontinuity. So all images should be loaded for the first time. In this way, when these images are used later, they will be cached as local resources, and the loading speed will be much faster, and there will be no white fault. This is the end of this article about how to quickly solve the white gap problem (flash screen) that occurs when CSS uses @keyframes to load images for the first time. For more relevant CSS keyframes loading image content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: Sample code for separating the front-end and back-end using FastApi+Vue+LayUI
>>: Should I use UTF-8 or GB2312 encoding when building a website?
Recommend
MySQL 8.0.15 installation tutorial for Windows 64-bit
First go to the official website to download and ...
Detailed explanation of the four transaction isolation levels in MySQL
The test environment of this experiment: Windows ...
Detailed explanation of HTML basic tags and structures
1. HTML Overview 1.HTML: Hypertext Markup Languag...
Share some key interview questions about MySQL index
Preface An index is a data structure that sorts o...
A brief discussion on the use and analysis of nofollow tags
Controversy over nofollow There was a dispute bet...
SQL implementation of LeetCode (182. Duplicate mailboxes)
[LeetCode] 182.Duplicate Emails Write a SQL query...
Example of how to mosaic an image using js
This article mainly introduces an example of how ...
A brief discussion on the principle of Vue's two-way event binding v-model
Table of contents explain: Summarize Replenish Un...
Web page experience: Web page color matching
<br />The color of a web page is one of the ...
About converting textarea text to html, that is, carriage return and line break
Description: Change the carriage return in the tex...
v-html rendering component problem
Since I have parsed HTML before, I want to use Vu...
A case study to thoroughly understand how to correctly use MySQL inndb joint index
There is a business that queries the 5 most recen...
Ubuntu 20.04 Best Configuration Guide (Newbie Essential)
1. System Configuration 1. Turn off sudo password...
15 Best Practices for HTML Beginners
Here are 30 best practices for HTML beginners. 1....
Realization of real-time file synchronization between Linux servers
Usage scenarios For existing servers A and B, if ...