Evento di associazione JQuery quando l'immagine di sfondo CSS è completamente carica

Question

Vorrei attivare un evento dopo che un'immagine di sfondo è stata COMPLETAMENTE caricata. L'immagine è composta da uno script PHP dinamico.

$("#box").css("background-image","url(image.php)"); 

forse posso cercare di ottenere l'immagine in un invisibile e quando il carico immagine <img> (.load()) impostare lo sfondo-immagine con la src di quella invisibile <img>? non sono sicuro ...

grazie per il vostro aiuto.

Answer 1

Si potrebbe utilizzare il mio plugin per jQuery chiamato waitForImages che avrebbe aiutato con questo ...

$("#box").css("background-image", "url(image.php)").waitForImages({ 
    waitForAll: true, 
    finished: function() { 
     // Background image has loaded. 
    } 
}); 

In caso contrario, per farlo manualmente ...

var image = 'image.php', 

    img = $('<img />'); 

img.bind('load', function() { 
    // Background image has loaded. 
}); 

img.attr('src', image); 

$('#box').css('background-image', 'url(' + image + ')'); 

Answer 2

$("#box img").load(function() { 
    //the image elements in #box are fully loaded. 
});