JQuery bind event when CSS background-image is fully loaded

Question

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.

Answer 1

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 + ')');

Answer 2

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