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

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

Vue-Entwicklungsbaumstrukturkomponenten (Komponentenrekursion)

In diesem Artikelbeispiel wird der spezifische Co...

Docker trifft auf Intellij IDEA, Java-Entwicklung steigert die Produktivität um das Zehnfache

Inhaltsverzeichnis 1. Vorbereitung vor der Entwic...

webpack -v Fehlerlösung

Hintergrund Ich möchte die Webpack-Version überpr...

Lösen Sie das Problem, dass VMWare nach der Installation des Mac-Systems nicht im Vollbildmodus angezeigt werden kann

System: VMTOOLs-Download: Verknüpfung: https://pa...

jQuery erzielt Ein- und Ausblendeffekte

Bevor wir jQuery verwenden, um den Ein- und Ausbl...

Tiefgreifendes Verständnis der angegebenen IE-Browser-Rendering-Methode

<meta http-equiv="X-UA-kompatibel" c...

Techniken zur Optimierung von MySQL-Paging-Abfragen

In Anwendungen mit Paging-Abfragen sind Abfragen,...

So sichern Sie MySQL-Kontoinformationen elegant

Vorwort: Ich bin kürzlich auf das Problem der Ins...

Detaillierte Schritte zum Bereitstellen von Microsoft SQL Server mit Docker

Inhaltsverzeichnis 1 Hintergrund 2 Erstellen Sie ...

Zusammenfassung der allgemeinen APIs und erweiterten APIs von Vue

Inhaltsverzeichnis nächstesTick Mixins $forceUpda...

So führen Sie in 1 Minute ein reibungsloses Upgrade und Rollback der Nginx-Version durch

Lassen Sie uns heute über eine Situation sprechen...

So stellen Sie Rancher mit Docker bereit (keine Fallstricke)

Vor der Inbetriebnahme unbedingt lesen: Hinweis: ...

Web-Standardanwendung: Neugestaltung der Tencent QQ-Homepage

Die Homepage von Tencent QQ wurde neu gestaltet un...

Beispielcode zur Implementierung sechseckiger Rahmen mit CSS3

Die äußerste BoxF dreht sich um 120 Grad, die zwe...

MySQL verwendet einen abdeckenden Index, um Tabellenrückgaben zu vermeiden und die Abfrage zu optimieren

Vorwort Bevor wir über den Deckungsindex sprechen...