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.

score 10 · Accepted Answer · answered Oct 28 '11 at 06:51

10

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

answered Oct 28 '11 at 06:51

alex

438,662
188
837
957

do you know why I get this error: Error: $.isPlainObject is not a function? (note that image.php generate a new image each time we call it) – pelelive Oct 28 '11 at 16:55
@pelelive Are you using < jQuery 1.4? – alex Oct 29 '11 at 22:54
thank you alex its working now. cheers! – pelelive Oct 30 '11 at 03:46

score -1 · Answer 2 · answered Oct 28 '11 at 06:49

-1

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

answered Oct 28 '11 at 06:49

Johan

31,613
48
166
272

4

It's a `background-image`, not an `img` element. – alex Oct 28 '11 at 07:20

JQuery bind event when CSS background-image is fully loaded

2 Answers2