Aptech Jakarta
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

ApTech Jakarta
  • Beranda
  • Catering Jakarta
  • Catering Bogor
  • Catering Depok
  • Catering Tangerang
  • Catering Bekasi
  • Teknologi

Cara Memanipulasi Broken Image Menggunakan Javascript

  • Mei 17, 2013
  • admin
0

SHARES

ShareTweet

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

mengganti broken image / gambar

Demo Download

Javascript memungkinkan kita untuk mengolah gambar broken (gagal terload) tersebut dengan menggunakan beberapa metode :

  1. Mengganti dan memanipulasi gambar melalui script function
  2. Melalui inline function noError di dalam tag <img>
  3. 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.

Contents

  • 1 Menggunakan Metode Javascript 1 dan 2
  • 2 Menggunakan Jquery
  • 3 Baca juga:

1Menggunakan 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 :


function imgError(image) {
image.onerror = “”;
image.src = “gambarerror.png”;
return true;
}

view raw

broken.js

hosted with ? by GitHub

Dari fungsi tersebut kemudian akan kita panggil pada masing-masing tag <img> dengan cara :


<img src=”gambarku.png” onerror=”imgError(this);“/>

view raw

gambar.html

hosted with ? by GitHub

Kita pun bisa melakukan penggantian broken image melalui inline menggunakan fungsi onError yang akan kita sisipkan ke dalam tag <img>, berikut adalah contohnya :


<img src=”gambarku.png” height=”100px” width=”100px” onError=”this.onerror=null;this.src=’replace.png’;“>

view raw

inline.html

hosted with ? by GitHub

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”>.

2Menggunakan 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 :


$(document).ready(function(){
$(“img”).error(function(){
$(this).attr(“src”, “replace.png”);
})
});

view raw

replace.js

hosted with ? by GitHub

Setelah membuat script di atas, misalkan kita akan memanggil 3 source gambar di bawah ini :


<img src=”gambarku.png” height=”100px” width=”100px“>
<img src=”gambarku212.png” height=”100px” width=”100px“>
<img src=”gambarku212.png” height=”100px” width=”100px“>

view raw

gambar.html

hosted with ? by GitHub

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.

Baca juga:

  1. Menyimpan Gambar Offline Ke Browser Menggunakan imgcache.js
  2. Format Tanda Pemisah Angka Dengan Javascript
  3. Membuat Icon Smartphone Dengan CSS3
  4. Desain Aman Form Login Menggunakan Jquery Accordion
  5. Menambahkan Variabel PHP ke Dalam Kode Javascript
 
admin

Previous Article
  • Teknologi

Swasembada Internet

  • Mei 15, 2013
  • admin
View Post
Next Article
  • Teknologi

Mencicipi Clean Retina, Tema Responsive Untuk WordPress

  • Mei 18, 2013
  • admin
View Post

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Pos-pos Terbaru
  • 8 HP Untuk Main Call of Duty Mobile Terbaik 2023
  • Game Esports Terbaik
  • Rekomendasi 10 Game Browser Terbaik
  • Aplikasi Pengunci Aplikasi Android Terbaik
  • 6 Smartwatch Terbaik 1 Jutaan Tahun 2022, Super Canggih!
Arsip
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows
Wedding Organizer

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Partner

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

External Link

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Blog Teknologi Jakarta
Berita dan artikel teknologi dan Informasi Jakarta

Input your search keywords and press Enter.