Mecha versi 2.6.4 sudah dirilis!

JavaScript/jQuery · Cek Jika Latar Gambar Telah Termuat

Tabel Konten
  1. JavaScript Mentah 
  2. jQuery 

Lakukan sesuatu jika latar gambar pada elemen #test-bg telah termuat.

Tidak ada fungsi bawaan khusus yang bisa digunakan untuk mengecek bahwa sebuah latar gambar telah termuat. Tetapi Anda bisa melakukan itu dengan cara mengambil URL latar gambar pada elemen yang Anda inginkan untuk Anda sisipkan ke dalam atribut src gambar palsu yang Anda buat melalui JavaScript. Mengapa gambar? Karena kita bisa mendeteksi event onload pada gambar:

JavaScript Mentah 

function getBgUrl(el) {
    var bg = "";
    if (el.currentStyle) { // IE
        bg = el.currentStyle.backgroundImage;
    } else if (document.defaultView && document.defaultView.getComputedStyle) { // Firefox
        bg = document.defaultView.getComputedStyle(el, "").backgroundImage;
    } else { // try and get inline style
        bg = el.style.backgroundImage;
    }
    return bg.replace(/url\(['"]?(.*?)['"]?\)/i, "$1");
}

var image = document.createElement('img');
image.src = getBgUrl(document.getElementById('test-bg'));
image.onload = function() {
    alert('Loaded!'); // Test!
};

jQuery 

var bg = $('#test-bg').css('background-image').replace(/url\(['"]?(.*?)['"]?\)/i, "$1");
$('<img />').attr('src', bg).on("load", function() {
    alert('Loaded!'); // Test!
});

Lihat Demo


Referensi: SO - How Can I Check if a Background Image is Loaded?

10 Komentar

kamu info

pake gif loading aja backgroundya, pasti seperti lagi memuat gambar :v

dhanyn10

mas taufik, ijin pinjem widgetnya notifikasi ya

Pantun Simanjuntak

7:( fix bener kodenya jadi universal dan fleksibel
keren mas taufik! gak ada jempol 2, jempol 1 di double pun jadi :-bd :-bd

Saeful Rahman

Komentar ini telah dihapus oleh pengarang.

Saeful Rahman

Kira-kira ini fungsinya buat apa ? masih gk ngerti sya. :-a .
Oh ya mas, apakah kita bisa membuat fitur pada komentar seperti halnya kaskus dg memanfaatkan fitur top komentator. Misalkan orang dg jumlah komentar sekian dari sekian memiliki label Newbie atau apalah. Contohnya.

Anonim

tutorial yang sangat bagus gan, js nya mantap tenan dah.

Icah Banjarmasin

Assallammualikum Bang Taufiq..apa kabarnya nih bang lama saya ga ngesot kemari..heee..o ya terima kasih nih atas tips javanya yang dishare..hahahyy

Unknown

So kita nggak perlu refresh , yaps ane sependapat dengan blog ini

Komentar telah ditutup.