Web サイトの読み込みを高速化するために CSS 背景画像をプリロードするにはどうすればよいですか?

CSS 画像のプリロード

非表示要素に CSS 背景画像を使用するときに直面する一般的な問題の 1 つは、表示の顕著な遅延です。この遅延の理由は、Web ブラウザのデフォルトの遅延読み込み動作にあり、視覚的に必要になるまでこれらの画像の読み込みを延期します。

この問題に対処するには、これらの画像をプリロードすることが非常に有益です。プリロードにより、画像がブラウザによってロードおよびキャッシュされるようになり、レンダリングが高速化され、ユーザー エクスペリエンスがよりスムーズになります。

CSS のみを使用したプリロード

効果的な方法純粋な CSS を使用して画像をプリロードするには、::after 疑似要素の content プロパティを利用する必要があります。 content プロパティを複数の画像 URL に設定し、display: none で ::after 要素を非表示にするか、z-index 値を調整すると、ブラウザはこれらの画像をレンダリングせずにプリロードできます。

body::after {
  content: url(img1.png) url(img2.png) url(img3.gif) url(img4.jpg);
  display: none;
}

例:

このアプローチでは、ブラウザーが画像をバックグラウンドでロードすると同時に、画像が隠されたままになるようにします。 view.

CSS のみのプリロードの利点

• JavaScript や外部リソースは不要
• シンプルで簡単な実装

クロスブラウザのサポート (すべてが保証されているわけではありません) case

代替方法

CSS のみのプリロードに加えて、画像のプリロードには代替方法が存在します。
JavaScript:
• Image オブジェクトを使用して画像を手動でプリロードする
HTML5:
• 内の preload 属性を使用する。要素
Web ワーカー:

画像の読み込みを別のスレッドにオフロードします

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