I would like to trigger an event after a background-image is FULLY loaded. The image is made from a dynamic PHP script.
$("#box").css("background-image","url(image.php)");
maybe I can try to get the image in a invisible <img>
and when the image load (.load())
set the background-image with the src of that invisible <img>
? not sure...
thank you for your help.
You could use my jQuery plugin called waitForImages that would help with this...
$("#box").css("background-image", "url(image.php)").waitForImages({
waitForAll: true,
finished: function() {
// Background image has loaded.
}
});
Otherwise, to do it manually...
var image = 'image.php',
img = $('<img />');
img.bind('load', function() {
// Background image has loaded.
});
img.attr('src', image);
$('#box').css('background-image', 'url(' + image + ')');