Quickly solve the white gap problem (flash screen) when CSS uses @keyframes to load images for the first cycle

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 count detailed explanation and function example code

Detailed explanation of mysql count The count fun...

vsftpd virtual user based on MySql authentication

Table of contents 1. MySQL installation 1.2 Creat...

MySQL 8.0.24 installation and configuration method graphic tutorial

This article shares the installation tutorial of ...

A brief analysis of the matching priority of Nginx configuration location

Preface The location in the server block in the N...

Several ways to switch between Vue Tab and cache pages

Table of contents 1. How to switch 2. Dynamically...

MySQL 8.0.12 Installation and Usage Tutorial

Recorded the installation and use tutorial of MyS...

JavaScript implements draggable modal box

This article shares the specific code of JavaScri...

InnoDB type MySql restore table structure and data

Prerequisite: Save the .frm and .ibd files that n...

MySQL 8.0.14 installation and configuration method graphic tutorial (general)

MySQL service 8.0.14 installation (general), for ...

Detailed explanation of KVM deployment of three virtual machines to implement WordPress experiment

1. Introduction to KVM The abbreviation of kernel...

Basic ideas for finding errors in Web front-end development

WEB development mainly consists of two interactio...

Two ways to remove the 30-second ad code from Youku video

I believe everyone has had this feeling: watching ...

Detailed graphic explanation of setting up routing and virtual machine networking in Linux

What is routing? Routing refers to the activity o...

Pure CSS to achieve the text description of semi-transparent effect when the mouse is placed on it (must read for novices)

The effect is as follows: Example 1 Example 2: Ta...

HTML table tag tutorial (21): row border color attribute BORDERCOLOR

To beautify the table, you can set different bord...