CSS が最初のサイクルで画像を読み込むために @keyframes を使用するときに発生するホワイトギャップの問題 (フラッシュ画面) をすばやく解決します。

問題の説明:

CSS アニメーションプロパティを使用すると、ループが最初に読み込まれたときに白いギャップが表示され、ページが更新されているように見えます。この問題は、後続のループでは発生しません。

問題の提示

//html
 <div class="コンテナ">
        <div class="first"> </div>
  </div>
//少ない
。容器 {
  幅：100vw;
  高さ: 100%;
}
.コンテナ .first {
  幅：100vw;
  高さ：100vh;
  アニメーション: bgmove 10秒 無限;
}
@keyframes bgmove {
  0% {
    背景: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") 繰り返しなし 中央 中央;
    背景サイズ: カバー;
    不透明度: 1;
  }
  15% {
    背景: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") 繰り返しなし 中央 中央;
    不透明度: 1;
    背景サイズ: カバー;
  }
  30% {
    背景: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg") 繰り返しなし 中央 中央;
    不透明度: 1;
    背景サイズ: カバー;
  }
  45% {
    背景: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg") 繰り返しなし 中央 中央;
    不透明度: 1;
    背景サイズ: カバー;
  }
  60% {
    背景: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg") 繰り返しなし 中央 中央;
    不透明度: 1;
    背景サイズ: カバー;
  }
  80% {
    背景: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") 繰り返しなし 中央 中央;
    不透明度: 1;
    背景サイズ: カバー;
  }
  100% {
    背景: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") 繰り返しなし 中央 中央;
    背景サイズ: カバー;
    不透明度: 1;
  }
}

解決

//少ない
。容器 {
  幅：100vw;
  高さ: 100%;
}
.コンテナ .first {
  幅：100vw;
  高さ：100vh;
  背景: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");
  アニメーション: bgmove 10秒 無限;
}
@keyframes bgmove {
  0% {
    背景: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") 繰り返しなし 中央 中央;
    背景サイズ: カバー;
    不透明度: 1;
  }
  15% {
    背景: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") 繰り返しなし 中央 中央;
    不透明度: 1;
    背景サイズ: カバー;
  }
  30% {
    背景: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg") 繰り返しなし 中央 中央;
    不透明度: 1;
    背景サイズ: カバー;
  }
  45% {
    背景: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg") 繰り返しなし 中央 中央;
    不透明度: 1;
    背景サイズ: カバー;
  }
  60% {
    背景: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg") 繰り返しなし 中央 中央;
    不透明度: 1;
    背景サイズ: カバー;
  }
  80% {
    背景: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") 繰り返しなし 中央 中央;
    不透明度: 1;
    背景サイズ: カバー;
  }
  100% {
    背景: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") 繰り返しなし 中央 中央;
    背景サイズ: カバー;
    不透明度: 1;
  }
}

最終結果

問題分析

一般的に、画像の読み込みには、画像のプリロードと画像の遅延読み込みの 2 つの状況があります。ここでは、画像のプリロードの問題について説明しています。ページに画像が多すぎると、サーバーに大きな負荷がかかります。一度に画像を読み込むと、中断が発生します。そのため、すべての画像を最初に読み込む必要があります。このようにして、これらの画像が後で使用されるときに、ローカルリソースとしてキャッシュされ、読み込み速度が大幅に高速化され、ホワイトフォールトが発生しなくなります。

CSS が @keyframes を使用して画像を初めて読み込むときに発生するホワイトギャップ問題 (画面がフラッシュする) をすばやく解決する方法についての記事はこれで終わりです。CSS キーフレームを使用して画像を読み込む関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: FastApi+Vue+LayUIを使用してフロントエンドとバックエンドを分離するサンプルコード

>>: ウェブサイトを構築するときは、UTF-8 または GB2312 エンコードを使用する必要がありますか?