tags:

views:

28

answers:

1

I carefully read the question 'Official way to ask jQuery wait for all images to load before executing something', but IE is giving me a hard time.

I want to fade in some images after the background image has load, so thanks for the explanation, all is working well on FF, Safari and Chrome. It doesn't seem to work on IE though. Tried it on two different computers, with IE version 8 (8.0.7).

Can someone advise me on this one please? My website is http://www.laforcemajeure.nl

This is my code, which is on the bottom of my script.js file:

 $(window).load(
    function() {
        $("#allbirds").fadeIn(2000);
    }
 );
+1  A: 

You're attaching your window.onload function inside a document.ready handler, instead move it outside. onload fires once, and if you bind after that happens you're just out of luck, that seems to be what's happening in your case.

Different browsers have slightly different behavior on the timing of the ready event for jQuery, as a fallback it'll use window.onload itself which means if this happens and you're binding to an event inside that handler, it's too late...the event has already fired.

Rule of thumb: keep your $(window).load() handlers outside your $(document).ready() handlers.

Nick Craver
Thanks for the explanation, it makes sense. I changed it and moved the $(window).load() part beneath the $(document).ready() handlers. I didn't have the good results though. IE still doesn't do the effect (I erased the history) and Safari Mac now quickly showes the the div before fading it in correctly.
Wouter
Hi Nick, Besides putting the $(window).load() beneath the doc.ready, I also changed the selector. Instead of the div #allbirds (which is the container of the birds), I now select the class .bird, selecting each bird seperately. Now it works flawlessly! Thanks for the great advice, the first impression of my site is much better now.
Wouter