jquery fade in effect for background image

Question

I have this markup for the background image:

<img src="bg.jpg" id="bg" alt="">

and this css:

#bg { position: fixed; top: 0; left: 0; }
#bg {display:none;}

and this jquery:

$(document).ready(function(){
$('#bg').load(function() {
$(this).fadeIn('slow');
});
});

Basically it works, but the strange situation is that sometimes the image loads, sometimes not, sometimes I have to refresh the page few times. Take a look here to see what I'm talking about.

Check this out: http://stackoverflow.com/questions/1700864/making-images-fade-in-on-image-load-using-jquery — Igor Zinov'yev, Sep 02 '11 at 13:17
Could try on $(window).load()... but then there'd be a flash of the bg. — Chris, Sep 02 '11 at 13:20

score 2 · Answer 1 · answered Sep 02 '11 at 13:19

The $(document).ready() event is fired when the DOM is ready, but BEFORE any images are guaranteed to have loaded.

So what you're experiencing MAY be, that sometimes you image just hasn't loaded when the .ready event fires.

Try using the .load event instead.

score 2 · Accepted Answer · answered Sep 02 '11 at 13:20

The thing is that the image loads before the script. So, by the time you are binding an eventhandler for the image load event, the image is already loaded and the event is not triggered.
You should execute your function when the window loads, not when the document is ready :

$(window).load(function(){
    $('#bg').load(function() {
       $(this).fadeIn('slow');
    });
});

score 0 · Answer 3 · answered Sep 02 '11 at 13:23

The whole point of .ready() is that your code will fire once "the DOM hierarchy has been fully constructed". Since you're waiting on an image, this would be exactly what you don't want. jQuery.load() "does not get triggered until all assets such as images have been completely received", so move your .load statement out of doc ready.

jquery fade in effect for background image

3 Answers3