Diterjemahkan dari: Membuat Preloader Gambar CSS
Bahasa Mandarin: Pramuat gambar CSS murni
Ada banyak cara untuk mengimplementasikan pramuat gambar, biasanya sebagian besar menggunakan Javascript agar semuanya tetap berjalan. Jangan lagi dibatasi oleh pramuat Javascript, gunakan CSS dan Anda dapat memuat gambar Anda terlebih dahulu tanpa kesulitan.
Mengapa menggunakan pramuat
Mengapa Anda mempertimbangkan untuk menggunakan pramuat? Pernahkah Anda memiliki website yang navigasinya harus di-scroll lalu ada penundaan hingga gambar dimuat...hehehe. Pramuat akan membantu Anda dalam hal ini. Ini akan memuat gambar-gambar itu ketika halaman dimuat dan menyimpannya di cache browser. Dengan cara ini, saat pengguna menggulir navigasi, akan menjadi indah dan lancar, tanpa penundaan.
kode CSS
Konsepnya adalah menulis gaya CSS untuk mengatur sekumpulan gambar latar belakang dan kemudian menyembunyikannya sehingga Anda tidak dapat melihat gambar tersebut. Gambar latar belakang tersebut adalah gambar yang ingin Anda muat sebelumnya.
Berikut ini contohnya:
#pemuat awal {
/* Gambar yang ingin Anda muat sebelumnya*/
gambar latar belakang: url(gambar1.jpg);
gambar latar belakang: url(gambar2.jpg);
gambar latar belakang: url(gambar3.jpg);
lebar: 0 piksel;
tinggi: 0 piksel;
tampilan: sebaris;
}
Ini hanyalah cara untuk menyembunyikan gambar Anda agar tidak ditampilkan. Saya juga melihat orang menggunakan nilai posisi latar belakang yang sangat besar untuk mengeluarkan gambar. Atau berikan nilai margin negatif. Ada banyak cara untuk menyembunyikan gambar yang ingin Anda muat sebelumnya, pilih salah satu yang paling sesuai untuk Anda.
situasi lain
Jarang sekali Anda memiliki gambar berukuran besar untuk diunduh, jika Anda mengikuti pendekatan biasa dengan memberikan semacam indikasi bahwa gambar sedang dimuat. Berikut adalah beberapa CSS untuk memberi petunjuk kepada pengguna bahwa gambar sedang dimuat.
img { latar belakang: url(loadingHourGlass.gif) tidak ada pengulangan 50% 50% }
Gambar GIF dapat dianimasikan, mirip dengan bola pantai di Mac atau jam pasir di PC. Gunakan animasi sehingga pengguna mengetahui sesuatu sedang terjadi.
sebagai kesimpulan
Lakukan yang terbaik saat pramuat masuk akal, dan pengguna Anda akan menyukai Anda karenanya. Sebenarnya mereka mungkin tidak menyadarinya, tapi itu bagus, jika mereka melihat situs Anda sedang dimuat, mungkin itu terlalu lambat.
Lihat Demo
Catatan khusus tentang Contoh 1
Pertama-tama, terima kasih atas pertanyaan yang diajukan oleh netizen di komentar. Setelah menerjemahkan artikel ini, mengingat atribut yang sama didefinisikan beberapa kali dalam aturan CSS, browser umumnya hanya memproses yang terakhir, saya memutuskan bahwa itu perlu untuk dilakukan. melakukan tes, tetapi saya tidak menyadari apa yang sedang terjadi. Karena masalah ini serius, masalah ini tidak ditangani tepat waktu, yang mungkin menyebabkan beberapa kesalahpahaman.
Menurut pengujian saya, sebagian besar browser hanya memuat gambar terakhir, dan dua gambar pertama diabaikan . Namun di browser inti webkit, seperti chrome, ketiga gambar ini akan dimuat sebelumnya. Contoh 1 memberi kita ide bagus untuk menyelesaikan masalah , namun untuk penggunaan memuat banyak gambar dengan gaya CSS yang sama, kita mungkin harus menunggu hingga beberapa atribut gambar latar belakang CSS3 didukung oleh lebih banyak browser.
PS: Biar saya jelaskan demo ini. Mungkin penulis aslinya tidak terlalu banyak berpikir dan hanya ingin mendemonstrasikan efek preloading, jadi halaman demo ini agak sederhana: dia hanya menggunakan gambar yang sudah dimuat sebelumnya sebagai background a:hover, sehingga ketika mouse lewat itu, Bisa bebas kedipan realitas gambar itu. Nah, itulah kegunaan kedua dalam artikel tersebut...