2

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);
    }
 );
Community
  • 1
  • 1
Galaxy Surfer
  • 84
  • 2
  • 10
  • 1
    What exactly happens or doesn't happen? Is the event triggered or not? (Use an `alert()` to find out for sure.) – Pekka Oct 26 '10 at 11:33
  • 1
    Are you sure there is only one element with the ID `allbirds` in your page? IE tends to be more picky about unique IDs than other browsers. – Pekka Oct 26 '10 at 11:34
  • I only have one allbirds div, for sure. – Galaxy Surfer Oct 26 '10 at 12:25
  • I only have one allbirds div. The div will show at once in IE, but no fade. But you guys gave me an idea and in combination with the helpful answer of Nick now it works: I changed the div allbirds to the class .bird, selecting each single bird instead of the container. Now it works. Thanks! – Galaxy Surfer Oct 26 '10 at 12:37

1 Answers1

8

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
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 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. – Galaxy Surfer Oct 26 '10 at 12:20
  • 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. – Galaxy Surfer Oct 26 '10 at 12:39