CSS Only Image Preloading - Trik CSS

Salah satu alasan besar untuk menggunakan pramuat gambar adalah jika Anda ingin menggunakan gambar untuk gambar latar belakang suatu elemen pada acara mouseOver atau: hover. Jika Anda hanya menerapkan gambar latar belakang itu di CSS untuk status: hover, gambar itu tidak akan dimuat sampai acara pertama: hover dan dengan demikian akan ada jeda singkat yang mengganggu antara mouse melewati area itu dan gambar benar-benar muncul .

Teknik # 1

Muat gambar pada keadaan biasa elemen, hanya geser dengan posisi latar belakang. Kemudian pindahkan posisi latar belakang untuk menampilkannya saat mengarahkan kursor.

#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )

Teknik # 2

Jika elemen yang dimaksud sudah memiliki gambar latar belakang yang diterapkan dan Anda perlu mengubah gambar itu, cara di atas tidak akan berfungsi. Biasanya Anda akan memilih sprite di sini (gambar latar belakang gabungan) dan hanya menggeser posisi latar belakang. Tetapi jika itu tidak memungkinkan, coba ini. Terapkan gambar latar belakang ke elemen halaman lain yang sudah digunakan, tetapi tidak memiliki gambar latar belakang.

#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )

Ide membuat elemen halaman baru untuk digunakan untuk teknik pramuat ini mungkin muncul di kepala Anda, seperti # preload-001, # preload-002, tapi itu bertentangan dengan semangat standar web. Karenanya penggunaan elemen halaman yang sudah ada di halaman Anda.

Saya punya ide untuk mencoba dan menggunakan elemen yang sama, hanya gunakan: after pseduo-class untuk memuat gambar, jadi Anda tidak perlu mengandalkan cukup banyak gambar bebas latar belakang yang tidak relevan di halaman Anda untuk dikerjakan, tetapi untuk alasan apa pun tidak ingin memuatnya dengan benar.