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()是否有更好的解决方法

修改

我也尝试过添加过滤器：inherit;我的css没有运气。感谢

Answer 1

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

解决方案是在几个步骤中执行操作，这样您就可以保证在设置.load()之前附加.src处理程序。

$(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中调试它（很难在不看运行代码的情况下进行调试）。

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

1 个答案: