Evento de vinculación de JQuery cuando la imagen de fondo CSS está completamente cargada

Question

Me gustaría desencadenar un evento después de que una imagen de fondo esté COMPLETAMENTE cargada. La imagen está hecha de un script PHP dinámico.

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

tal vez pueda tratar de obtener la imagen en una y cuando la carga invisible <img> imagen (.load()) establecer la imagen de fondo con el src de ese invisible <img>? no estoy seguro ...

gracias por su ayuda.

Answer 1

Se podía usar mi plugin de jQuery llamado waitForImages que ayudaría con esto ...

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

De lo contrario, hacerlo de forma manual ...

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. 
});