IE停止animationGIF

有没有人知道一个解决方法,使animationGIF的继续animation后,你点击一个链接或提交在IE上的页面上的表单? 这在其他浏览器中正常工作。

谢谢。

接受的解决scheme并不适合我。

经过一些更多的研究后,我发现了这个解决方法 ,实际上它确实有效。

这是它的要点:

function showProgress() { var pb = document.getElementById("progressBar"); pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>'; pb.style.display = ''; } 

并在你的html:

 <input type="submit" value="Submit" onclick="showProgress()" /> <div id="progressBar" style="display: none;"> <img src="./progress-bar.gif" width="200" height ="40"/> </div> 

所以当提交表单时,会插入<img/>标签,由于某种原因它不会受到animation问题的影响。

testingFirefox,ie6,ie7和ie8。

老问题,但发布这对于谷歌同胞:

Spin.js能为这个用例工作: http ://fgnass.github.com/spin.js/

IE假设点击一个链接预示着一个新的导航,当前页面的内容将被replace。 作为这个过程的一部分,它暂停了animationGIF的代码。 我怀疑你有什么可以做的(除非你实际上没有在onclick事件中使用return false)。

这里是一个jsFiddle工作得很好表单提交方法=“后”。 微调表单被添加到表单提交事件。

 $("form").bind("submit", onFormSubmit); function onFormSubmit() { setTimeout(showSpinner, 1); } function showSpinner() { $("body").append($('<img id="spinner" src="spinner.gif" alt="Spinner" />')); } 

在这里看到jsFiddle代码

在你的IE浏览器里testing一下

我遇到了这个post,虽然已经得到了回复,但感觉应该发布一些信息,帮助我解决IE 10特有的这个问题,并可能帮助其他人到达这个post。

我很困惑如何GIFanimation只是没有在IE 10中显示,然后发现这个gem。

工具Internet选项高级多媒体在网页中播放animation

希望这可以帮助。

我在处理表单提交时尝试显示加载gif时遇到此问题。 它有一个额外的乐趣层,相同的onsubmit必须运行validation程序,以确保表单是正确的。 像其他人一样(在互联网上的每个IE / gif表单发布),我无法让加载微调在IE中“旋转”(在我的情况下,validation/提交表单)。 当通过http://www.west-wind.com上的build议看,我发现了一个ev13wt的post,提示这个问题是“;… IE不会渲染图像作为animation,因为它被渲染时是不可见的。 “ 这是有道理的。 他的解答:

在gif将要去的地方保留空白,并使用JavaScript在onsubmit函数中设置源代码 – document.getElementById('loadingGif')。src =“gif文件的path”。

以下是我如何实现它:

 <script type="text/javascript"> function validateForm(form) { if (isNotEmptyid(form.A)) { if (isLen4(form.B)) { if (isNotEmptydt(form.C)) { if (isNumber(form.D)) { if (isLen6(form.E)){ if (isNotEmptynum(form.F)) { if (isLen5(form.G)){ document.getElementById('tabs').style.display = "none"; document.getElementById('dvloader').style.display = "block"; document.getElementById('loadingGif').src = "http://img.dovov.comajax-loader.gif"; return true; } } } } } } } return false; } </script> <form name="payo" action="process" method="post" onsubmit="return validateForm(this)"> <!-- FORM INPUTS... --> <input type="submit" name="submit" value=" Authorize "> <div style="display:none" id="dvloader"> <img id="loadingGif" src="" alt="Animated Image that appears during processing of document." /> Working... this process may take several minutes. </div> </form> 

这在所有浏览器中都适用于我!

这是我做的。 所有你需要做的就是把你的GIF分解成10个图像(在这种情况下,我从01.gif开始,以01.gif 10.gif ),并指定你保存它们的目录。

HTML:

 <div id="tester"></div> 

JavaScript的:

 function pad2(number) { return (number < 10 ? '0' : '') + number } var dirURL = 'path/to/yourhttp://img.dovov.comfolder', ajaxLoader = document.createElement('img'); ajaxLoader.className = 'ajax-image-loader'; jQuery(document).ready(function(){ jQuery('#tester').append(ajaxLoader); set(0); }); function set(i) { if (i > 10) i = 1; img.src = dirURL + pad2(i) + '.gif'; setTimeout(function() { set(++i); }, 100); } 

这种方法适用于IE7,IE8和IE9(尽pipeIE9可以使用spin.js )。 注:我没有在IE6中testing过,因为我没有机器运行从60年代的浏览器,虽然方法是如此简单,它可能工作,即使在IE6和更低。

与此相关,我不得不find一个修正,其中animationgif被用作背景图像,以确保样式表保持样式表。 一个类似的修复工作,我也在那里…我的脚本是这样的事情(我使用jQuery来更容易得到计算的背景风格 – 如何做到这一点,没有jQuery是另一篇文章的主题):

 var spinner = <give me a spinner element> window.onbeforeunload = function() { bg_image = $(spinner).css('background-image'); spinner.style.backgroundImage = 'none'; spinner.style.backgroundImage = bg_image; } 

[编辑]有了更多的testing,我刚刚意识到,这不适用于IE8中的背景图像。 我一直在想我能想到的所有东西,让IE8在加载页面的时候呈现一个gifanimation,但是现在看起来不太可能。

build立在@danfolkes的答案,这在IE 8和ASP.NET MVC3中为我工作。

在我们的_Layout.cshtml

 <body style="min-width: 800px"> <div id="progress"> <div style="min-height: 200px"> </div> <div id="throbber"> <img src="..\..\Content\ajax-loader.gif" alt="Progress" style="display: block; margin-left: auto; margin-right: auto" /> </div> </div> <div id="main"> 

<<< content here >>> …

 <script type="text/javascript" language="javascript"> function ShowThrobber() { $('#main').hide(); $('#progress').show(); // Work around IE bug which freezes gifs if (navigator.appName == 'Microsoft Internet Explorer') { // Work around IE bug which freezes gifs $("#throbber").html('<img src="../../Content/ajax-loader.gif" alt="Progress" style="display: block; margin-left: auto; margin-right: auto"/>'); } </script> <script type="text/javascript" language="javascript"> function HideThrobber() { $('#main').show(); $('#progress').hide(); } </script> <script type="text/javascript" language="javascript"> $(document).ready(function () { HideThrobber(); }); </script> 

在我们的导航链接中:

 <input type="submit" value="Finish" class="submit-link" onclick="ShowThrobber()"/> 

要么

 @Html.ActionLink("DoSometthing", "MyController", new { Model.SomeProperty }, new { onclick = "ShowThrobber()" }) 

find这个解决scheme在http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html它工作!; 只需重新加载图像,然后再设置为可见。 从button的onclick中调用以下Javascript函数:

 function showLoader() { //*** Reload the image for IE *** document.getElementById('loader').src='.http://img.dovov.comloader.gif'; //*** Let's make the image visible *** document.getElementById('loader').style.visibility = 'visible'; } 

我意识到这是一个古老的问题,到现在为止,原来的海报都find了适合他们的解决scheme,但是我碰到了这个问题,发现VML标签不会成为这个IE错误的牺牲品。 使用VML标签放置在IE浏览器上时,animationGIF在页面卸载过程中仍会移动。

注意我在决定使用VML标记之前首先检测到了VML,所以这在FireFox和其他使用正常animationGIF行为的浏览器中工作。

这是我如何解决这个问题。

 <input class="myExitButton" type="button" value="Click me" /> <div class="loadingNextPage" style="display:none" > <span style="left:-24px; POSITION: relative; WIDTH: 48px; DISPLAY: inline-block; HEIGHT: 48px" class="spinnerImageVml"><?xml:namespace prefix="rvml" ns = "urn:schemas-microsoft-com:vml" /><rvml:group style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; rotation: 1deg" class="rvml" coordsize = "47,47"><rvml:image style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; TOP: 0px; LEFT: 0px" class="rvml" src="http://img.dovov.comloading_gray.gif" coordsize="21600,21600"></rvml:image></rvml:group></span> <img class="spinnerImage" src="http://img.dovov.comloading_gray.gif" alt="loading..." /> <div>Just one moment while we access this information...</div> </div> <script language="javascript" type="text/javascript"> window.LoadProgress = (function (progress, $) { var getdialogHeight = function (height) { var isIE = navigator.userAgent.toLowerCase().indexOf('msie') > -1; if (isIE) { return height + 'px'; } return height; }; var isVmlSupported = function () { var a = document.body.appendChild(document.createElement('div')); a.innerHTML = '<v:shape id="vml_flag1" adj="1" />'; var b = a.firstChild; b.style.behavior = "url(#default#VML)"; var supported = b ? typeof b.adj == "object" : true; a.parentNode.removeChild(a); return supported; }; var showAnimationDuringPageUnload = function () { if (isVmlSupported()) { $(".loadingNextPage > .spinnerImage").hide(); } else { $(".loadingNextPage > .spinnerImageVml").hide(); } }; var openLoadingMessage = function () { $(".loadingNextPage").dialog({ modal: true, closeOnEscape: true, title: 'Please wait...', closeText: 'x', height: getdialogHeight(200), buttons: { "Close": function () { $(this).dialog("close"); } } }); }; $('.myExitButton').click(function () { openLoadingMessage(); showAnimationDuringPageUnload(); window.location.href = 'http://www.stackoverflow.com'; }); return progress; })(window.LoadProgress || {}, window.jQuery); </script> 

当然,这依赖于jQuery,jQueryUI并需要某种types的animationGIF(“http://img.dovov.comloading_gray.gif”)。;

jQuery的:

 $("#WhereYouWantTheImageToAppear").html('<img src="./Animated.gif" />'); 

刚刚有一个类似的问题。 这些对我来说是完美的。

 $('#myElement').prepend('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />'); $('<img src="/path/to/img.gif" alt="My Gif" title="Loading" />').prependTo('#myElement'); 

另一个想法是使用jQuery的.load(); 加载,然后prepend图像。

适用于IE 7+

回答这个问题已经很晚了,但是我刚刚发现,在CSS中使用被编码为base64 URI的背景图像,而不是作为单独的图像保存,在IE8中继续生成animation。

一个非常简单的方法是使用jQuery和SimpleModal插件 。 那么当我需要提交我的“加载”gif时,我会这样做:

 $('*').css('cursor','wait'); $.modal("<table style='white-space: nowrap'><tr><td style='white-space: nowrap'><b>Please wait...</b></td><td><img alt='Please wait' src='loader.gif' /></td></tr></table>", {escClose:false} ); 

我也遇到了同样的问题,对Firefox等其他浏览器也很常见。 最后我发现dynamic创build一个带有animationgif的元素在表单提交没有animation,所以我开发了下面的工作。

1)在document.ready() ,在页面中find每个FORM,接收position:relative属性,然后给每个附加一个不可见的DIV.bg-overlay

2)在此之后,假设我的网站的每个提交值由btn-primary css类标识,再次在document.ready() ,我查找这些button,遍历每个的父表单,并在表单提交,我用showOverlayOnFormExecution(this,true); 函数,通过点击button和一个布尔值来切换DIV.bg-overlay可见性。

 $(document).ready(function() { //Append LOADING image to all forms $('form').css('position','relative').append('<div class="bg-overlay" style="display:none;"><img src="http://img.dovov.comloading.gif"></div>'); //At form submit, fires a specific function $('form .btn-primary').closest('form').submit(function (e) { showOverlayOnFormExecution(this,true); }); }); 

DIV.bg-overlay CSS如下:

 .bg-overlay { width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(255,255,255,0.6); z-index:100; } .bg-overlay img { position:absolute; left:50%; top:50%; margin-left:-40px; //my loading images is 80x80 px. This is done to center it horizontally and vertically. margin-top:-40px; max-width:auto; max-height:80px; } 

3)在任何forms的提交中,下面的函数被激发以显示覆盖它的半白色背景(否认与表单交互的能力)和其内部的animationgif(可视化显示加载动作)。

 function showOverlayOnFormExecution(clicked_button, showOrNot) { if(showOrNot == 1) { //Add "content" of #bg-overlay_container (copying it) to the confrm that contains clicked button $(clicked_button).closest('form').find('.bg-overlay').show(); } else $('form .bg-overlay').hide(); } 

在表单中显示animation的gif,而不是附加在这个事件上,解决了各种浏览器的“gifanimation冻结”问题 (就像我在IE和Firefox中发现这个问题,而不是在Chrome中)