表示の遅延を避けるために 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 が切り替えられると、画像はすでにロードされており、瞬時に表示されます。

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

Toggle Me


さらに、以下を使用することをお勧めします。スプライト イメージを使用して HTTP リクエストを最小限に抑え、イメージが HTTP2 をサポートするサーバー上でホストされるようにします。このアプローチにより、全体的なパフォーマンスが向上し、シームレスなユーザー エクスペリエンスが保証されます。
以上が表示の遅延を避けるために CSS 背景画像をプリロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。


						
					

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。