JavaScript/jQuery · Cek Jika Latar Gambar Telah Termuat
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!
});
Referensi: SO - How Can I Check if a Background Image is Loaded?
Labels: Gambar, JavaScript, jQuery, Potongan
10 Comments:
oo macam ada pesan begitu yah
pake gif loading aja backgroundya, pasti seperti lagi memuat gambar :v
Baeklah \o/
mas taufik, ijin pinjem widgetnya notifikasi ya
7:( fix bener kodenya jadi universal dan fleksibel
keren mas taufik! gak ada jempol 2, jempol 1 di double pun jadi :-bd :-bd
This comment has been removed by the author.
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.
http://2.bp.blogspot.com/-cK-7pwHuG7U/Uhdp8668SwI/AAAAAAAAAMY/V6tBVibfync/s1600/Thread+Comment.jpg
tutorial yang sangat bagus gan, js nya mantap tenan dah.
Assallammualikum Bang Taufiq..apa kabarnya nih bang lama saya ga ngesot kemari..heee..o ya terima kasih nih atas tips javanya yang dishare..hahahyy
So kita nggak perlu refresh , yaps ane sependapat dengan blog ini
Post a Comment
<< Home