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中）
