Bagaimana Saya Boleh Pramuat Imej Latar Belakang CSS untuk Mengelak Penampilan Tertunda?

Memuat Pramuat Imej CSS

Untuk menangani isu kelewatan penampilan imej latar belakang CSS dalam borang kenalan yang ditogol, adalah penting untuk pramuat imej ini dengan berkesan. Satu kaedah untuk mencapai ini melibatkan penggunaan CSS sahaja.

Coretan kod berikut menunjukkan cara pramuat imej CSS menggunakan elemen rawak (di sini, elemen ) sebagai sasaran:

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 */
}

Dalam kod ini, elemen pseudo ::after digunakan untuk memuatkan berbilang imej secara serentak. Dengan melaraskan sifat kedudukan dan indeks-z, imej ini disembunyikan, menghalangnya daripada dipaparkan pada halaman web. Akibatnya, apabila div yang mengandungi ditogol, imej sudah dimuatkan dan muncul serta-merta.

Untuk tujuan demonstrasi, lihat yang berikut:

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

<div>

Selain itu, disyorkan untuk menggunakan imej sprite untuk meminimumkan permintaan HTTP dan memastikan bahawa imej dihoskan pada pelayan yang menyokong HTTP2. Pendekatan ini meningkatkan prestasi keseluruhan dan menjamin pengalaman pengguna yang lancar.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Pramuat Imej Latar Belakang CSS untuk Mengelak Penampilan Tertunda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!