CSS のプリロードにより、非表示のフォーム要素の背景画像表示をどのように最適化できますか?

CSS 画像のプリロード

非表示の連絡先フォームの表示を最適化しようとすると、フォームのフィールドに関連付けられた CSS 背景画像が表示されるという問題が発生します。顕著な遅れ。これを解決するには、ユーザーは jQuery スクリプトを使用して画像をプリロードします。

画像のプリロードに 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 */
}

この中でcode:

• ::after 疑似要素は、通常、すべての Web ページに存在する body 要素に付加されます。
• 位置、幅、高さは 0 に設定されます。画像を視覚的に非表示にします。
• 画像が表示されているものの背後に配置されるように、z-index は -1 に設定されます。 content.
• content プロパティは、複数の画像を同時に読み込むために使用されます。

CSS プリロードの利点

この CSS ベースのアプローチは、以下を提供します。いくつかの利点:

• コードが簡素化され、追加の必要性が減ります。
• ページのレイアウトに影響を与えることなく、バックグラウンドで画像をプリロードします。
• 画像を個別にロードする必要がなくなり、HTTP リクエストが削減されます。

追加の最適化

複数の画像を 1 つのスプライトに結合すると、さらに最適化が可能になります。小さいサイズの画像が多数ある場合は HTTP リクエスト。さらに、HTTP/2 をサポートするサーバーで画像がホストされていることを確認すると、読み込み速度が向上します。

以上がCSS のプリロードにより、非表示のフォーム要素の背景画像表示をどのように最適化できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。