在 Internet Explorer 中显示加载程序 GIF 时出现问题

Question

在用户点击表单提交后，我试图在 jquery 对话框（当然没有标题栏）上显示 loader gif。

做了几件事后，我想出了这个：demo，并对自己说“终于！成功了！”，但是当我在 IE（我通常使用 Chrome）上测试它时，令我失望的是，动画（loader.gif）似乎没有那么动画，我的意思是它看起来像一个静态图像，我不知道为什么它在 FF、Chrome 和 safary 中运行良好，而在 IE 中根本无法运行。

我知道 gif 可以在 jsfiddle 上创造奇迹，即使你使用 IE，但由于某种原因，当我在我的项目上做同样的事情时它不会:(

PS：如果你有其他方法做同样的事情，我没问题，只要它在 IE 中也可以工作

希望你能帮我解决这个问题。

Answer 1

好的，这就是我解决它的方法。它似乎取决于将叠加层添加到文档的时间。

说明： 如果在 onclick 期间将图像添加到 chrome 和 FF 的 DOM，它不会显示我的等待 GIF ......但它会显示在 IE 中。我不确定为什么它出现在 IE 中而不是 ff 或 chrome 中。这可能与它在回发之前动态添加到 DOM 的事实有关。

如果图像在页面加载时被添加到 DOM 并且刚刚滑出屏幕，我可以在回发之前将其移动到适当的位置，它可以在 FF 和 chrome 中工作，但在 IE 中不起作用。这样做时，IE 会阻止 GIF 动画。

在 IE 中工作

function IeWaitOverlayObj() {

    var _waitoverlay = null;
    var _waitImage = null;
    var _isHidden = true;
    this.showOverlay = function() {
        if (!_waitoverlay) {
            _waitoverlay =
                $('<div></div>')
                    .css({
                        zIndex: '9998',
                        backgroundColor: '#000000',
                        width: $(window).width(),
                        height: $(window).height(),
                        top: '0px',
                        left: '0px',
                        position: 'absolute',
                        opacity: '0.5'
                    });
            var tag = '<img alt="pleaseWait" src="../Images/wait.gif" />';
            _waitImage = $(tag).css({
                zIndex: '9999',
                position: 'absolute',
                top: $(window).height() / 2 - 75,
                left: $(window).width() / 2 - 200,
                width: '400px',
                height: '150px'
            });

            $('body').append(_waitoverlay);
            $('body').append(_waitImage);
            _isHidden = false;
        }
    };
    this.hideOverlay = function() {
        _waitoverlay.hide();
        _isHidden = true;
    };
    this.OnWindowResize = function() {
        if (!_isHidden) {
            _waitoverlay.css({
                width: $(window).width(),
                height: $(window).height()
            });
            _waitImage.css({
                top: $(window).height() / 2 - 75,
                left: $(window).width() / 2 - 200
            });
        }
    }
}

适用于 Chrome 和 FF

function WaitOverlayObj() {
    var _waitoverlay = $('<div></div>');
    var _waitImage = $('<img alt="pleaseWait" src="../Images/wait.gif" />');
    var _isHidden = true;

    $('body').append(_waitoverlay);
    $('body').append(_waitImage);

    _waitoverlay.css({
        zIndex: '9998',
        backgroundColor: '#000000',
        width: $(window).width(),
        height: $(window).height(),
        top: '0px',
        left: $(window).width() * -1,
        position: 'absolute',
        opacity: '0.5'
    });
    _waitImage.css({
        zIndex: '9999',
        position: 'absolute',
        top: '0px', 
        left: '-400px',
        width: '400px',
        height: '150px'
    });

    this.showOverlay = function() {
        _waitImage.css({ top: $(window).height() / 2 - 75, left: $(window).width() / 2 - 200 });
        _waitoverlay.css({ top: '0px', left: '0px' });
        _isHidden = false;
    };
    this.hideOverlay = function() {
        _waitImage.css({ top: '0px', left: '-400px' });
        _waitoverlay.css({ top: '0px', left: $(window).width() * -1 });
        _isHidden = true;
    };

    this.OnWindowResize = function() {
        if (!_isHidden) {
            _waitoverlay.css({
                width: $(window).width(),
                height: $(window).height()
            });
            _waitImage.css({
                top: $(window).height() / 2 - 75,
                left: $(window).width() / 2 - 200
            });
        }
    }
}

在我的 Document.Ready 中

if (navigator.appName == "Microsoft Internet Explorer") {
    wait = new IeWaitOverlayObj();
}
else{
    wait = new WaitOverlayObj();
}

Answer 2

Base64 将图像编码到您的 CSS 中。然后 IE8 继续为其设置动画。

Answer 3

window.onbeforeunload = function() { jQuery("img").attr("src", "image.gif") }; 应该可以工作。我现在没有检查它，但这个想法和我前一段时间成功使用的想法是一样的