要解決切換聯絡人表單中 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中文網其他相關文章！
