Kadang-kadang dalam pekerjaan pengembangan front-end, untuk mendapatkan informasi gambar, kita perlu mendapatkan ukuran dan ukuran gambar dengan benar setelah gambar dimuat, dan menjalankan fungsi callback yang sesuai untuk membuat gambar menghasilkan efek tampilan tertentu. Artikel ini terutama mengatur beberapa metode umum untuk menilai penyelesaian pemuatan gambar, dan menjelaskan dan menjelaskannya melalui kombinasi kode dan aplikasi praktis.
metode onload
Jalankan kode Javascipt berikutnya dengan menambahkan atribut onload ke tag IMG dan mengisi fungsi yang sesuai. Dalam contoh kode berikut, elemen IMG tidak ditampilkan secara default. Ditentukan oleh Onload bahwa gambar ditampilkan setelah beban selesai.
Salinan kode adalah sebagai berikut:
<img onload = "get (this)" src = "..." style = 'display: none' />
<type skrip = "Teks/JavaScript">
fungsi get (ts) {
ts.style.display = 'block'; // Tunjukkan gambar
}
</script>
Keuntungan: Bagian kode JavaScript dapat ditempatkan pada bagian mana pun dari halaman untuk dimuat, dan dapat digunakan pada sebagian besar gambar sewenang -wenang. Ini relatif mudah digunakan dan mudah dimengerti.
Kekurangan: Atribut Onlaod harus diposting pada setiap tag, yang tidak berlaku dalam beberapa kasus di mana kode HTML tidak dapat dimanipulasi secara langsung atau jika kode harus disederhanakan.
Metode asli Javascipt
Pilih gambar dengan ID yang ditentukan, tentukan metode callback melalui onload, dan prompt dengan kata "pemuatan gambar selesai" muncul setelah gambar dimuat.
Salinan kode adalah sebagai berikut:
<img id = "pic1" src = "..." />
<bahasa skrip = "javascript">
document.geteLementById ("pic1"). onload = function () {
alert ("Image Loading selesai");
}
</script>
Keuntungan: Sederhana dan mudah digunakan, tanpa mempengaruhi kode HTML.
Kerugian: Hanya satu elemen yang dapat ditentukan, dan kode Javascipt harus ditempatkan di bawah elemen gambar
metode jQuery
Untuk setiap acara pengikatan elemen gambar dengan kelas PIC1, elemen secara bertahap muncul melalui metode pemuatan jQuery.
Perhatikan bahwa tidak mengikat acara muat di $ (dokumen) .ready ().
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
$ (function () {
$ ('. pic1'). masing -masing (fungsi () {
$ (this) .load (function () {
$ (ini) .fadein ();
});
});
})
</script>
Keuntungan: Peristiwa elemen dapat terikat dalam batch dan tidak mempengaruhi konten kode HTML
Kekurangan: Dukungan perpustakaan jQuery diperlukan, dan kode perlu ditempatkan di bawah elemen yang perlu dioperasikan.