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
JavaScript to achieve drop-down menu effect
Use Javascript to implement a drop-down menu for ...
Detailed explanation of the workbench example in mysql
MySQL Workbench - Modeling and design tool 1. Mod...
Detailed description of the use of advanced configuration of Firewalld in Linux
IP masquerading and port forwarding Firewalld sup...
Solution to CSS anchor positioning being blocked by the top fixed navigation bar
Many websites have a navigation bar fixed at the ...
Detailed explanation of the difference between WeChat applet bindtap and catchtap
Table of contents 1. What is an event? 2. How to ...
Vue implements drag and drop or click to upload pictures
This article shares the specific code of Vue to a...
Implementation of mounting NFS shared directory in Docker container
Previously, https://www.jb51.net/article/205922.h...
HTML tutorial: How to modify image size, alignment, spacing and border attributes
Image tag : <img> To insert an image into a ...
An article to help you understand the basics of VUE
Table of contents What is VUE Core plugins in Vue...
What you need to know about MySQL auto-increment ID
Introduction: When using MySQL to create a table,...
Detailed tutorial on running selenium+chromedriver on the server
1. Introduction I want to use selenium to scrape ...
2 methods and precautions for adding scripts in HTML
How to add <script> script in HTML: 1. You c...
Sharing of SQL optimization experience when offset is too large during MySQL paging
Find the problem When we display the contents in ...
jQuery realizes the sliding effect of drop-down menu
When we make a web page, sometimes we want to hav...
Solution to Nginx 500 Internal Server Error
Today, when I was using Nginx, a 500 error occurr...