JQuery binding event when CSS background image is fully loaded

Question

I would like to trigger an event after the background image is fully loaded. Image made from a dynamic PHP script.

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

maybe I can try to get the image in the invisible <img> and when loading the image (.load ()) set the background image using src of this invisible <img> ? not sure...

Thank you for your help.

Answer 1

You can use my jQuery plugin called waitForImages , which will help with this ...

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

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