在Internet Explorer中显示加载程序GIF的问题 [英] Problem showing loader GIF in Internet Explorer

问题描述

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

I'm trying to show a loader gif, on a jquery dialog(with no title bar of course) after a user clicks submit on a form.

做了几件事之后我想出了这个：演示，并对自己说终于！成功！，但是当我在IE上测试它时（我通常使用Chrome），令我失望的是，动画（loader.gif）似乎不是那个动画，我的意思是它看起来像一个静态图像，我不知道为什么它在FF，Chrome和safary中工作如此之好，它根本不适用于IE。

After doing a couple of thing I came up with this: demo ,and said to myself "Finally! Success!", but when I tested it on IE (I usually use Chrome),much to my disappointment, the animation (loader.gif) didn't seem to be that animated, I mean it looked like a static image and I don't know why it works so fine in FF, Chrome and safary and it simply doesn't work in IE.

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

I know that gif works wonders on the jsfiddle , even If you use IE, but for some reason when I do the same on my project it doesn't :(

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

PS:I have no problem if you have another way of doing the same thing, as long as it also works in IE

希望你能帮助我。

推荐答案

好这是我如何解决它。它似乎取决于叠加层添加到文档的时间。

Ok Here is how I got around it. It seems to be dependent on the time the overlay is added to the document.

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

Explanations: If the image is added to chrome and FF's DOM during onclick it won't show my wait GIF... but it will show up in IE. I'm not sure as to why it shows up in IE and not ff or chrome. It could have something to do with the fact that it's added to the DOM on the fly just before a postback.

如果图像在页面加载时添加到DOM只是从屏幕上滑下来，我可以简单地将它移动到恰好在回发之前的适当位置，它将在FF和Chrome中工作但不在IE中。 IE以这种方式停止动画制作。

If the image is added to the DOM at page load time and just slid off the screen, I can simply move it to the proper place just before postback and it will work in FF and chrome but not in IE. IE stops the GIF from animating when doing it this way.

在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

Works in Chrome and 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中

And in my Document.Ready

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

这篇关于在Internet Explorer中显示加载程序GIF的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！