JQuery Problem: Script (Sometimes) Fails On (Some Versions Of) IE7

Question

I'm using an image cross-fading method via jQuery on a website. For confidentiality reasons, I can't post the site's entire code, but here's the Javascript for the cross-fader (based on this reference ):

     <script type="text/javascript">
        $(function () {
          if ($.browser.msie && $.browser.version < 7) return;        
          $('#nav li')    
            .removeClass('highlight').find('a').append('<span class="hover" />').each(function () {
              var $span = $('> span.hover', this).css('opacity', 0);
              $(this).hover(function () {
                $span.stop().fadeTo(250, 1);
              }, function () {
                $span.stop().fadeTo(250, 0);
              });
            });
        });
     </script>

It works swimmingly on all browsers -- including the IE7 install on my test PC. However, on other PCs with IE7, the effect sometimes fails. The images will load, but hovering over them produces no effect. This means the JS isn't outright failing -- in that case, the rollovers would still work, just with no fading. Instead, it seems that IE7 is removing the "highlight" class, but then stopping.

The truly bizarre part? The failure is 100% random. If I refresh the window, sometimes the effect will work fine. How can this be?

UPDATE: I've determined that the problem lies somewhere with the AJAX scripting that's powering the website. Removing all AJAX and replacing it with static content eliminates the error. My theory is that when the page loads, sometimes the AJAX content is completed before the image load. This makes IE7 freak out and give up on the crossfade effect. If I'm correct that this is the problem, the question is: how can I fix it?

UPDATE 2: Going further down the rabbit hole, using Fiddler, I notice one consistent thing for each successful load of the effect in IE7: the loading of the main image that I'm using for the hover is aborted, then loaded again. This does not happen when the effect is unsuccessful. To put it another way, forcing the browser to preload the images using a simple jQuery preloader function breaks the cross effect in IE7 every single time, instead of its current sporadically-working state.

This is just too bizarre for me to even comprehend, but any ideas are certainly welcome.

Answer 1

Is your CSS included before you call the ready function? From the docs :

Note: Please make sure that all stylesheets are included before your scripts (especially those that call the ready function). Doing so will make sure that all element properties are correctly defined before jQuery code begins executing. Failure to do this will cause sporadic problems, especially on WebKit-based browsers such as Safari.

I understand IE is not WebKit based, but it's worth checking.