Wait for back image to be loaded

Question

I got this line in my javascript:

$("#botbg").css("background-image", "url(/png/" + epage + ".jpg)");

"botbg" is a div. is it possible to attach a callback to this function? I simply want other operations to wait till this is finished.

these werent succesfull:

$("#botbg").css("background-image", "url(/png/" + epage + ".jpg)").load(function(){
//...
});

$("#botbg").css("background-image", "url(/png/" + epage + ".jpg)").one("load", function(){
//...
});

$("#botbg").css("background-image", "url(/png/" + epage + ".jpg)").ready(function(){
//...
});

Bruno · Answer 1 · 2012-11-17T12:14:48.187

2

Try

var img = new Image();
img.src = url;
img.onload = function( ) {
    $("#botbg").css("background-image", "url(" + url + ")");
}

edited Nov 17 '12 at 12:14

answered Nov 17 '12 at 12:08

Bruno

5,772
1
26
43

a alert after "function(){" doesnt fire:S – BigX_Jazz Nov 17 '12 at 13:18

sdespont · Answer 2 · 2012-11-17T12:09:52.943

0

No, you can't.

The best thing you can do is to load your image inside a temp div then set your background image with when the load callback is called like this :

<div id="tmp"><img src="/png/yourimage.jpg" /></div>

$("#tmp").load(function(){
    $("#botbg").css("background-image", "url(/png/yourimage.jpg)");
});

EDIT

New way to call .load() function

<div id="tmp"><img src="/png/yourimage.jpg" /></div>

$("#tmp").on("load", function() {
    $("#botbg").css("background-image", "url(/png/yourimage.jpg)");
});

edited Nov 17 '12 at 12:09

answered Nov 17 '12 at 12:00

sdespont

13,915
9
56
97

While this solution might work it's not advised because [load()](http://api.jquery.com/load-event/) is **Deprecated** and it doesn't work consistently nor reliably cross-browser. – Bogdan Nov 17 '12 at 12:06
Ok, I didn't know that, I have updated my answer acc. to this post http://stackoverflow.com/questions/12643160/load-method-deprecated – sdespont Nov 17 '12 at 12:10
Aren't you just testing if div _tmp_ has loaded rather than testing if the img has loaded? – Bruno Nov 17 '12 at 12:13
Yeah, I am using this code on my web site, but your solution is better than mine => +1 – sdespont Nov 17 '12 at 12:15
Unfortunately that fixes only half of the problem. Using it with `.on('load')` doesn't make the event any more reliable for use in conjunction with images. Check out the **Caveats of the load event when used with images** notice on the docs page here: http://api.jquery.com/load-event/ – Bogdan Nov 17 '12 at 23:48

Bruno Vieira · Answer 3 · 2012-11-17T13:41:37.757

In jQuery the callback functions are only applied to asynchronous tasks and since the css function is a synchronized function there is no such thing as callback, and as such every line of code you put after the .css() function will be called immediately.

You can however track the load of your background-image, but even doing so it's not guaranteed that your code will be executed after the image is showing, specially in big images where the browser would take some time to render the image. To track if your image is loaded you can do something like the following:

$img = $('<img src="/png/'+epage+'.jpg" id="myImg"/>');//now it will work
$img.bind('load',function(){
    $("#botbg").css("background-image", "url(/png/" + epage + ".jpg)");
});

Here's a functional fiddle.

I hope it helped. Cheers

I'm sorry, I'll edit to make it right. Dumb me forgot an important detail — Bruno Vieira, Nov 17 '12 at 13:31

Wait for back image to be loaded

3 Answers3