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

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

做了几件事之后我想出了这个： 演示 ，并对自己说“终于！成功！”，但是当我在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 = $('
') .css({ zIndex: '9998', backgroundColor: '#000000', width: $(window).width(), height: $(window).height(), top: '0px', left: '0px', position: 'absolute', opacity: '0.5' }); var tag = ''; _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 = $('
'); var _waitImage = $(''); 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") }; 应该管用。 我现在没有检查，但这个想法与我前一段时间成功使用的相同