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
How to use cutecom for serial communication in Ubuntu virtual machine
Using cutecom for serial communication in Ubuntu ...
Install tomcat and deploy the website under Linux (recommended)
Install jdk: Oracle official download https://www...
Detailed explanation of how to dynamically enable/disable hyperthreading technology in Linux
Preface Intel's hyper-threading technology al...
Detailed examples of Docker-compose networks
Today I experimented with the network settings un...
MySQL ID starts to increase from 1 to quickly solve the problem of discontinuous ID
mysql id starts from 1 and increases automaticall...
A brief discussion on the $notify points of element
My original intention was to encapsulate the $not...
Detailed explanation of hosts file configuration on Linux server
Linux server hosts file configuration The hosts f...
A brief discussion on the difference between Mysql primary key index and non-primary key index
Table of contents What is an index The difference...
A brief discussion on how to set CSS position absolute relative to the parent element
As we all know, the CSS position absolute is set ...
A nice html printing code supports page turning
ylbtech_html_print HTML print code, support page t...
Use of environment variables in Docker and solutions to common problems
Preface Docker can configure environment variable...
MySQL 8.0.11 MSI version installation and configuration graphic tutorial
This article shares the installation and configur...
Use trigger method to realize pop-up file selection dialog box without clicking file type input
You can use the trigger method. There is no native...
Practice of multi-layer nested display of element table
There is a requirement for a list containing mult...
The principle and implementation of two-way binding in Vue2.x
Table of contents 1. Implementation process 2. Di...