JavaScript, Check if Background Image Has Been Loaded

http://www.dte.web.id

by Taufik Nurrohman

HTML

<div id="test-bg"></div>

CSS

#test-bg {
    width:440px;
    height:440px;
    background:transparent url('http://lh4.googleusercontent.com/-nxgZmVx9WAM/AAAAAAAAAAI/AAAAAAAAAAA/q7C64RWrrU0/s1600/photo.jpg') no-repeat 50% 50%;
}

JavaScript

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!');
};