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") };应该有效。我现在没有检查，但这个想法和我以前成功使用的一样

在Internet Explorer中显示加载程序GIF的问题

3 个答案: