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

  • abang ichal

    oo macam ada pesan begitu yah

  • kamu info

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

  • Unknown

    Baeklah \o/

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