How to Tell When a CSS Background Image Has Loaded? Is an Event Fired

How can I tell when a CSS background image has loaded? Is an event fired?

You could load the same image using the DOM / a hidden image and bind to the load event on that. The browser's caching should take care of not loading the image twice, and if the image is already loaded the event should fire immediately... not tested, tough.

How to verify background (css) image was loaded?

The only way I know of to do this is to load the image using Javascript, and then set that image as the backgroud.

For example:

var bgImg = new Image();
bgImg.onload = function(){
   myDiv.style.backgroundImage = 'url(' + bgImg.src + ')';
};
bgImg.src = imageLocation;

How can I check if a background image is loaded?

try this:

$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
   $(this).remove(); // prevent memory leaks as @benweet suggested
   $('body').css('background-image', 'url(http://picture.de/image.png)');
});

this will create a new image in memory and use load event to detect when the src is loaded.

EDIT: in Vanilla JavaScript it can look like this:

var src = 'http://picture.de/image.png';
var image = new Image();
image.addEventListener('load', function() {
   body.style.backgroundImage = 'url(' + src + ')';
});
image.src = src;

it can be abstracted into handy function that return a promise:

function load(src) {
    return new Promise((resolve, reject) => {
        const image = new Image();
        image.addEventListener('load', resolve);
        image.addEventListener('error', reject);
        image.src = src;
    });
}

const image = 'http://placekitten.com/200/300';
load(image).then(() => {
   body.style.backgroundImage = `url(${image})`;
});

determine whether body's background-image (css) has been loaded

You could load the image into a hidden <img> tag and assign an onload handler to the tag. In the onload handler you could populate the background image of the body (which should happen more or less instantly because the image is now in the browser cache) and then run your custom code as well.

var hiddenImg = new Image();
hiddenImg.onload = function(){
    $('body').css('background','url(' + this.src + ')');
    your_custom_onload_code();
};
hiddenImg.src = 'image.png';

jQuery detect css background-image finish download

I've done this before by temporarily appending a hidden child image to the div, then setting its parent's backround image and fading in, when the child image's load event has fired. Best to delete the child image afterwards, to keep things tidy! You could just append the image anywhere, but this was a mapping application and I had to keep the images associated with their parent divs!

Checking that the background image has loaded

What @variant said + code since the img onload event doesn't always fire:

var img = new Image(),
    div = $( "<div>" ).appendTo( "#image-container").hide();        

img.onload = function(){
    if( this.isLoaded ) {
    return;
    }
this.isLoaded = true;
loadedImages.push( 
    div.css( "background-image", "url('"+this.src+"') no-repeat center center" )
    );
}

img.src = images[imageToLoad].url;

if( ( img.complete || img.readyState === 4 ) && !img.isLoaded ) {
img.onload();
}

How to determine when document has loaded after loading external css

I wrote this code, what i wanted and worked for me:

window.engineLoading = {images_count:0, images_loaded_count:0, fonts_count:0, fonts_loaded_count:0 };
document.querySelector("a").onclick = function(){ // first elemnet a
    var before_stylesheets_length = document.styleSheets.length;
    var before_fonts_size = document.fonts.size;

    document.fonts.onloadingerror = function(a){
        window.engineLoading.fonts_loaded_count++;
    }               
    document.fonts.onloading = function(a){
        window.engineLoading.fonts_count++;
    }       
    document.fonts.onloadingdone = function(a){
        window.engineLoading.fonts_loaded_count++;
    }

    var head= document.getElementsByTagName('head')[0];
    var style= document.createElement('link');
    style.rel= 'stylesheet';
    style.setAttribute("href","./new_style.css");
    style.onload = function(){
        for(i=before_stylesheets_length; i<document.styleSheets.length; i++){
            var rules = document.styleSheets[i].rules;
            for(q=0; q<rules.length; q++){
                var styles = rules[q].style;
                for(s=0; s<styles.length; s++){
                    console.log(styles[s]);
                    if((styles[s] == "background-image" || styles[s] == "background") && styles.backgroundImage.length > 0){
                        window.engineLoading.images_count++;
                        var body= document.getElementsByTagName('body')[0];
                        var image = document.createElement('img');
                        var url = styles.backgroundImage;
                        url = url.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
                        image.src = url;
                        image.width = 0;
                        image.height = 0;
                        image.setAttribute("class","pace-load-style");
                        image.onload = function(e){
                            console.log(e);
                            window.engineLoading.images_loaded_count++;
                        };
                        image.onerror = function(e){
                            window.engineLoading.images_laoded_count++;
                        }
                        body.appendChild(image);
                        break;
                    }
                }
            }
        }
    };
    style.onerror = function(){};
    head.appendChild(style);

    setTimeout(function(){ 
        checkCurrentState();
    }, 1000);
    return false;
};

    function checkCurrentState(){
        if(window.engineLoading.images_count == window.engineLoading.images_loaded_count && window.engineLoading.fonts_count == window.engineLoading.fonts_loaded_count){
            console.log("loaded"); return true;
        }console.log("still loading...");
    return  setTimeout(function(){ 
            checkCurrentState();
        }, 1000);
    };

UPDATE: Scipt has bug on localfile because of empty rule. CSSRules is empty I don't worry about it , and no need fix it.

UPDATE: Mozilla Firefox hasnt reference document.fonts.

---

Related Topics