Lösen Sie schnell das Problem der weißen Lücke (Flash-Bildschirm), wenn CSS @keyframes verwendet, um Bilder für den ersten Zyklus zu laden
|
Problemerklärung: Wenn Sie die CSS-Eigenschaft „animations“ verwenden, wird beim ersten Laden der Schleife eine weiße Lücke angezeigt, die ein wenig so aussieht, als würde die Seite aktualisiert. Bei jeder nachfolgenden Schleife tritt dieses Problem nicht mehr auf. Problempräsentation
//html
<div Klasse="Container">
<div Klasse="Erste"> </div>
</div>
//weniger
.container {
Breite: 100vw;
Höhe: 100%;
}
.container .erste {
Breite: 100vw;
Höhe: 100vh;
Animation: bgmove 10s unendlich;
}
@keyframes bgmove {
0% {
Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") keine Wiederholung, Mitte, Mitte;
Hintergrundgröße: Abdeckung;
Deckkraft: 1;
}
15 % {
Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") keine Wiederholung, Mitte, Mitte;
Deckkraft: 1;
Hintergrundgröße: Abdeckung;
}
30% {
Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg") keine Wiederholung, Mitte, Mitte;
Deckkraft: 1;
Hintergrundgröße: Abdeckung;
}
45 % {
Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg") keine Wiederholung, Mitte, Mitte;
Deckkraft: 1;
Hintergrundgröße: Abdeckung;
}
60 % {
Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg") keine Wiederholung, Mitte, Mitte;
Deckkraft: 1;
Hintergrundgröße: Abdeckung;
}
80 % {
Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") keine Wiederholung, Mitte, Mitte;
Deckkraft: 1;
Hintergrundgröße: Abdeckung;
}
100 % {
Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") keine Wiederholung, Mitte, Mitte;
Hintergrundgröße: Abdeckung;
Deckkraft: 1;
}
}Lösung
//weniger
.container {
Breite: 100vw;
Höhe: 100%;
}
.container .erste {
Breite: 100vw;
Höhe: 100vh;
Hintergrund: 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 unendlich;
}
@keyframes bgmove {
0% {
Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") keine Wiederholung, Mitte, Mitte;
Hintergrundgröße: Abdeckung;
Deckkraft: 1;
}
15 % {
Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") keine Wiederholung, Mitte, Mitte;
Deckkraft: 1;
Hintergrundgröße: Abdeckung;
}
30% {
Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg") keine Wiederholung, Mitte, Mitte;
Deckkraft: 1;
Hintergrundgröße: Abdeckung;
}
45 % {
Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg") keine Wiederholung, Mitte, Mitte;
Deckkraft: 1;
Hintergrundgröße: Abdeckung;
}
60 % {
Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg") keine Wiederholung, Mitte, Mitte;
Deckkraft: 1;
Hintergrundgröße: Abdeckung;
}
80 % {
Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") keine Wiederholung, Mitte, Mitte;
Deckkraft: 1;
Hintergrundgröße: Abdeckung;
}
100 % {
Hintergrund: URL("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") keine Wiederholung, Mitte, Mitte;
Hintergrundgröße: Abdeckung;
Deckkraft: 1;
}
}Endergebnis
Problemanalyse Beim Laden von Bildern gibt es im Allgemeinen zwei Situationen: das Vorladen von Bildern und das verzögerte Laden von Bildern. Hier sprechen wir über das Problem des Vorladens von Bildern. Wenn sich zu viele Bilder auf einer Seite befinden, wird der Server stark belastet. Das gleichzeitige Laden von Bildern führt zu Diskontinuitäten. Daher sollten alle Bilder beim ersten Laden geladen werden. Auf diese Weise werden diese Bilder bei späterer Verwendung als lokale Ressourcen zwischengespeichert, und die Ladegeschwindigkeit ist viel schneller und es tritt kein weißer Fehler auf. Dies ist das Ende dieses Artikels darüber, wie man das Problem der weißen Lücke (Blinkbildschirm) schnell lösen kann, das auftritt, wenn CSS @keyframes zum ersten Mal zum Laden von Bildern verwendet. Weitere relevante CSS-Keyframes zum Laden von Bildinhalten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Beispielcode zur Trennung von Front-End und Back-End mit FastApi+Vue+LayUI
>>: Sollte ich beim Erstellen einer Website die Kodierung UTF-8 oder GB2312 verwenden?
Artikel empfehlen
Detaillierte Installation und Verwendung von Docker-Compose
Docker Compose ist ein Docker-Tool zum Definieren...
Detaillierte Erläuterung der Sicherheitskonfigurationselemente des Docker-Daemons
Inhaltsverzeichnis 1. Testumgebung 1.1 CentOS 7 i...
Mein CSS-Framework – base.css (Browser-Standardstil zurücksetzen)
Code kopieren Der Code lautet wie folgt: @Zeichen...
Erstellen Sie eine virtuelle Umgebung mit venv in Python3 in Ubuntu
1. Virtuelle Umgebung folgt dem Projekt, erstelle...
Implementierung von Zugriffskontrolle und Verbindungsbeschränkung basierend auf Nginx
Vorwort Das integrierte Modul von Nginx unterstüt...
Ein tiefer Einblick in die MySQL InnoDB-Speicher-Engine
Vorwort InnoDB gehört in MySQL zur Speicher-Engin...
Detaillierte Erläuterung der Verwendung der Vue3-Statusverwaltung
Inhaltsverzeichnis Hintergrund Bereitstellen / In...
Detaillierte Analyse der Parameterdatei my.cnf von MySQL in Ubuntu
Vorwort Aufgrund meines MySQL-Verständnisses denk...
Der Unterschied zwischen dem herkömmlichen Tomcat-Startdienst und dem in Springboot integrierten Tomcat-Startdienst (empfohlen)
Spring-Integration mit SpringMVC Die web.xml-Konf...
So erstellen Sie ein Docker-Repository mit Nexus
Das mit dem offiziellen Docker-Register erstellte...
Detaillierte Erklärung, wie Tomcat die Servlet-Initialisierung aus der Quellcodeanalyse aufruft
Inhaltsverzeichnis Einführung 1. Code zum Starten...
React implementiert die Erweiterungs- und Reduzierfunktion komplexer Suchformulare
Geben Sie der Zeit Zeit und lassen Sie die Vergan...
Better-Scroll realisiert den Effekt der Verknüpfung von Menü und Inhalt
1. Grundlegende Verwendung <!DOCTYPE html> ...
So gehen Sie mit Zeitzonenproblemen in Docker um
Hintergrund Als ich in diesen beiden Tagen Docker...
Vue-Komponente kapselt Beispielcode zum Hochladen von Bildern und Videos
Laden Sie zuerst die Abhängigkeiten herunter: cnp...