Pra Pemuatan Imej CSS - Trik CSS

Salah satu sebab besar untuk menggunakan pramuat gambar adalah jika anda ingin menggunakan gambar untuk latar belakang-elemen pada tetikusOver atau: acara hover. Sekiranya anda hanya menggunakan gambar latar dalam CSS untuk keadaan: hover, gambar itu tidak akan dimuat sehingga yang pertama: acara hover dan dengan demikian akan berlaku kelewatan pendek yang mengganggu antara tetikus yang melintasi kawasan itu dan gambar sebenarnya muncul .

Teknik # 1

Muatkan gambar pada keadaan biasa elemen, alihkannya hanya dengan kedudukan latar belakang. Kemudian gerakkan kedudukan latar belakang untuk memaparkannya pada hover.

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

Teknik # 2

Sekiranya elemen yang dimaksudkan sudah menerapkan gambar latar dan anda perlu mengubah gambar itu, perkara di atas tidak akan berfungsi. Biasanya anda akan memilih sprite di sini (gambar latar belakang gabungan) dan hanya menukar kedudukan latar belakang. Tetapi jika itu tidak mungkin, cubalah ini. Terapkan gambar latar ke elemen halaman lain yang sudah digunakan, tetapi tidak memiliki gambar latar.

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

Ideanya untuk membuat elemen halaman baru untuk digunakan untuk teknik pramuat ini mungkin muncul di kepala anda, seperti # preload-001, # preload-002, tetapi itu bertentangan dengan semangat standard web. Oleh itu penggunaan elemen halaman yang sudah ada di halaman anda.

Saya mempunyai idea untuk mencuba dan menggunakan elemen yang sama, hanya gunakan: setelah kelas pseduo untuk memuatkan gambar, jadi anda tidak perlu bergantung pada gambar anda yang cukup bebas latar belakang di halaman anda untuk digunakan, tetapi atas sebab apa pun tidak mahu memuatkannya dengan betul.