如何預先載入 CSS 背景圖以避免延遲出現？

預先載入 CSS 圖片

要解決切換聯絡人表單中 CSS 背景圖片延遲顯示的問題，有效地預先載入這些圖片至關重要。實現此目的的一種方法是單獨使用 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 屬性，這些圖像保持隱藏狀態，防止它們在網頁上呈現。因此，當切換包含的 div 時，圖像已載入並立即顯示。

出於演示目的，請參閱以下內容：

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

<div>

此外，建議使用精靈圖像，以最大限度地減少 HTTP 請求並確保圖像託管在支援 HTTP2 的伺服器上。這種方法提高了整體效能並保證了無縫的使用者體驗。

以上是如何預先載入 CSS 背景圖以避免延遲出現？的詳細內容。更多資訊請關注PHP中文網其他相關文章！