Permasalahan yang terkadang kita temukan pada website yang menampilkan puluhan bahkan ratusan gambar dalam satu page adalah tidak semua gambar tampil dengan sempurna atau broken. Permasalahannya bisa jadi dikarenakan faktor koneksi internet tidak bagus, faktor koneksi ke server, atau mungkin karena kita salah menginput url gambar.
mengganti broken image / gambar
Javascript memungkinkan kita untuk mengolah gambar broken (gagal terload) tersebut dengan menggunakan beberapa metode :
- Mengganti dan memanipulasi gambar melalui script function
- Melalui inline function noError di dalam tag <img>
- Menggunakan Jquery
Pada praktik tutorial kali ini, penulis akan mencoba metode yang ke-3 dengan memanfaatkan Jquery agar fungsi onError dapat kita masukkan secara dinamis. Penggunaan Jquery ini juga merupakan kombinasi metode 1 dan 2. Maka dari itu, kita juga perlu mencoba terlebih dahulu metode nomor 1.
Menggunakan Metode Javascript 1 dan 2
Penggunaan fungsi broken image menggunakan script, dapat dilakukan melalui pemanggilan fungsi di dalam <head>. Kita hanya perlu membuat satu fungsi sebagai berikut :
Dari fungsi tersebut kemudian akan kita panggil pada masing-masing tag <img> dengan cara :
Kita pun bisa melakukan penggantian broken image melalui inline menggunakan fungsi onError yang akan kita sisipkan ke dalam tag <img>, berikut adalah contohnya :
Dari dua metode tersebut, kita bisa melihat gambar yang dipakai untuk me-replace gambar broken kita panggil melalui function di Javascript atau onError function yang disisipkan ke tag <img>. Sedangkan gambar yang akan kita loading kita panggil terletak di tag <img src=”gambarku.png”>.
Menggunakan Jquery
Nah, bagaimana jika dalam sebuah halaman yang terdapat berpuluh-puluh gambar akan kita sisipi fungsi onError broken image tersebut? Kita bisa memanfaatkan Jquery untuk memecahkannya dengan menambahkan library Jquery dan menyisipkan fungsi .error pada <img> dengan source code berikut :
Setelah membuat script di atas, misalkan kita akan memanggil 3 source gambar di bawah ini :
Dari ketiga gambar tersebut, gambarku.png terletak di server sedangkan gambarku212.png merupakan gambar yang tidak terletak di server manapun alias gambar broken. Secara otomatis fungsi Jquery yang sebelumnya kita tulis di atas akan memanggil gambar replace.png yang telah kita definisikan sebelumnya.