my loading icon isn't fading out in ie8

Question

I have a loading icon like so:

 $(document).ready(function () {
   var $img = $('<img>', {
     src: '../images/loader.gif',
     id: 'dvLoading',
     css: {
       position: 'fixed',
       left: '50%',
       top: '50%',
       margin: '-25px 0 0 -25px;',
       filter: 'inherit'
     }
   }).load(function () {
     $(this).fadeOut(2000);
   });
   $('body').append($img);
 });

however, sometimes the loading icon doesn't disappear in IE8. From checking out other sites, people have said that IE8 doesn't work well with fadeOut especially if there is relative positioning. However, I'm using fixed positioning. Is there anything that can replace fixed positioning and still have my icon appear on the center of the screen? or is there a better work-around for fodeOut() in IE8

Edit:

I've also tried adding filter:inherit; to my css with no luck. Thanks

Answer 1

In certain versions of IE, you have to make absolutely sure that the .load() handler is applied BEFORE the .src property. If the image is in the browser cache, IE may fire the onload event immediately when the .src property is set. If that happens, the load event may have already happened before you attach your .load() handler, and thus you will miss the event and your code will never trigger the .fadeOut().

The solution is to do things in a couple steps so you can guarantee that the .load() handler is attached before .src is set.

$(document).ready(function () {
    $('<img>', {
        id: 'dvLoading',
        css: {
            position: 'fixed',
            left: '50%',
            top: '50%',
            margin: '-25px 0 0 -25px;',
            filter: 'inherit'
        }
    }).load(function () {
        $(this).fadeOut(2000);
    }).attr("src", '../images/loader.gif')
      .appendTo(document.body);
});

If there's a chance you also have an issue with your CSS in IE, then please post a working jsFiddle so we can debug it in older versions of IE (hard to do that without seeing running code).