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
Menggunakan Metode Javascript 1 dan 2Penggunaan fungsi broken image menggunakan script, dapat dilakukan melalui pemanggilan fungsi di dalam <head>. Kita hanya perlu membuat satu fungsi sebagai berikut :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function imgError(image) { | |
| image.onerror = “”; | |
| image.src = “gambarerror.png”; | |
| return true; | |
| } |
by Dari fungsi tersebut kemudian akan kita panggil pada masing-masing tag <img> dengan cara :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <img src=”gambarku.png” onerror=”imgError(this);“/> |
Kita pun bisa melakukan penggantian broken image melalui inline menggunakan fungsi onError yang akan kita sisipkan ke dalam tag <img>, berikut adalah contohnya :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <img src=”gambarku.png” height=”100px” width=”100px” onError=”this.onerror=null;this.src=’replace.png’;“> |
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
Menggunakan JqueryNah, 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 :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| $(“img”).error(function(){ | |
| $(this).attr(“src”, “replace.png”); | |
| }) | |
| }); |
Setelah membuat script di atas, misalkan kita akan memanggil 3 source gambar di bawah ini :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <img src=”gambarku.png” height=”100px” width=”100px“> | |
| <img src=”gambarku212.png” height=”100px” width=”100px“> | |
| <img src=”gambarku212.png” height=”100px” width=”100px“> |
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.
