表示の遅延を避けるために CSS 背景画像をプリロードするにはどうすればよいですか?

CSS 画像のプリロード

切り替えられたコンタクト フォームで CSS 背景画像の表示が遅れる問題に対処するには、これらの画像を効果的にプリロードすることが重要です。これを実現する方法の 1 つは、CSS のみを使用することです。

次のコード スニペットは、ターゲットとしてランダムな要素 (ここでは

要素) を使用して CSS 画像をプリロードする方法を示しています。

body::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1; /* hide images */
  content: url(img1.png) url(img2.png) url(img3.gif) url(img4.jpg); /* load images */
}

このコードでは、::after 疑似要素を使用して複数の画像を同時にロードします。位置と z-index プロパティを調整すると、これらの画像は非表示のままになり、Web ページ上でレンダリングされなくなります。その結果、含まれる div が切り替えられると、画像はすでにロードされており、瞬時に表示されます。

デモンストレーションの目的については、以下を参照してください。

<!-- Example usage -->
<div onclick="toggleDiv()">Toggle Me</div>

<div><p>さらに、以下を使用することをお勧めします。スプライト イメージを使用して HTTP リクエストを最小限に抑え、イメージが HTTP2 をサポートするサーバー上でホストされるようにします。このアプローチにより、全体的なパフォーマンスが向上し、シームレスなユーザー エクスペリエンスが保証されます。</p></div>

以上が表示の遅延を避けるために CSS 背景画像をプリロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。