javascript - 我的加载图标在 ie8 中没有淡出

Question

我有一个像这样的加载图标:

 $(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);
 });

但是，有时加载图标在 IE8 中不会消失。通过检查其他站点，人们说 IE8 不能很好地使用 fadeOut，尤其是在有相对定位的情况下。但是，我使用的是固定定位。有没有什么东西可以代替固定定位，让我的图标仍然出现在屏幕中央？或者对于 IE8 中的 fodeOut() 有更好的解决方法

编辑:

我也试过添加 filter:inherit;我的 CSS 没有运气。谢谢

Answer 1

在某些版本的 IE 中，您必须绝对确保 .load() 处理程序在 .src 属性之前应用。如果图像在浏览器缓存中，IE 可能会在设置 .src 属性时立即触发 onload 事件。如果发生这种情况，加载事件可能在您附加 .load() 处理程序之前已经发生，因此您将错过该事件并且您的代码永远不会触发 .fadeOut().

解决方案是分几步完成，这样您就可以保证在设置 .src 之前附加了 .load() 处理程序。

$(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);
});

如果您在 IE 中的 CSS 也有可能出现问题，那么请发布一个有效的 jsFiddle，以便我们可以在旧版本的 IE 中调试它(如果没有看到正在运行的代码很难做到这一点)。