blocks|key|3961045|text|被接受的解决方案对我不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3961046|经过更多的研究，我发现了this+workaround，它确实起作用了。|offset|length|3961047|这里是它的要点：|3961048|function+showProgress()+{
++++var+pb+=+document.getElementById("progressBar");
++++pb.innerHTML+=+'<img+src="./progress-bar.gif"+width="200"+height+="40"/>';
++++pb.style.display+=+'';
}|code-block|syntax|javascript|3961049|在你的html中：|3961050|<input+type="submit"+value="Submit"+onclick="showProgress()"+/>
<div+id="progressBar"+style="display:+none;">
++++<img+src="./progress-bar.gif"+width="200"+height+="40"/>
</div>|3961051|因此，当提交表单时，会插入<img/>标记，并且出于某种原因，它不会受到ie动画问题的影响。|style|CODE|3961052|在火狐、ie6、ie7和ie8上测试过。|3961053|entityMap|0|LINK|mutability|MUTABLE|url|http://www.webproworld.com/graphics-design-discussion-forum/63262-gif-show-page-loading.html^0|0|C|F|0|0|0|0|0|0|D|6|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|F|3|G|5|6|7|19|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@$D|1E|E|1F|S|T]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1G|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<p>The accepted solution did not work for me.</p>

<p>After some more research I came across <a href="http://www.webproworld.com/graphics-design-discussion-forum/63262-gif-show-page-loading.html" rel="noreferrer">this workaround</a>, and it actually does work.</p>

<p>Here is the gist of it:</p>

<pre class="lang-js prettyprint-override"><code>function showProgress() {
    var pb = document.getElementById("progressBar");
    pb.innerHTML = '&lt;img src="./progress-bar.gif" width="200" height ="40"/&gt;';
    pb.style.display = '';
}
</code></pre>

<p>and in your html:</p>

<pre class="lang-html prettyprint-override"><code>&lt;input type="submit" value="Submit" onclick="showProgress()" /&gt;
&lt;div id="progressBar" style="display: none;"&gt;
    &lt;img src="./progress-bar.gif" width="200" height ="40"/&gt;
&lt;/div&gt;
</code></pre>

<p>So when the form is submitted, the <code>&lt;img/&gt;</code> tag is inserted, and for some reason it is not affected by the ie animation issues.</p>

<p>Tested in Firefox, ie6, ie7 and ie8.</p>


blocks|key|5378625|text|这是一个老问题，但请谷歌的同事们这样说：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5378626|Spin.js确实适用于这个用例：http://fgnass.github.com/spin.js/|offset|length|5378627|entityMap|0|LINK|mutability|MUTABLE|url|http://fgnass.github.com/spin.js/^0|0|H|X|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>old question, but posting this for fellow googlers:</p>

<p>Spin.js DOES WORK for this use case: <a href="http://fgnass.github.com/spin.js/">http://fgnass.github.com/spin.js/</a></p>


blocks|key|3961012|text|IE假设点击一个链接就会出现一个新的导航，其中当前页面内容将被替换。作为处理过程的一部分，它会暂停动画GIF的代码。我怀疑您对此无能为力(除非您实际上并没有在导航，在这种情况下，请在onclick事件中使用return+false+)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3961013|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>IE assumes that the clicking of a link heralds a new navigation where the current page contents will be replaced.  As part of the process for perparing for that it halts the code that animates the GIFs.  I doubt there is anything you can do about it (unless you aren't actually navigating in which case use return false in the onclick event).</p>


blocks|key|3961290|text|这是一个使用method="post“提交表单的jsFiddle。微调控件是在表单提交事件上添加的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3961291|$("form").bind("submit",+onFormSubmit);

function+onFormSubmit()+{
++++setTimeout(showSpinner,+1);
}

function+showSpinner()+{
++++$("body").append($('<img+id="spinner"+src="spinner.gif"+alt="Spinner"+/>'));
}|code-block|syntax|javascript|3961292|See+jsFiddle+code+here|offset|length|3961293|Test+it+in+your+IE+browser+here|3961294|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jgqxQ/24/|1|http://fiddle.jshell.net/jgqxQ/4/show/^0|0|0|0|M|0|0|0|V|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>Here's a jsFiddle that works just fine on form submit with method="post". The spinner is added on form submit event.</p>

<pre><code>$("form").bind("submit", onFormSubmit);

function onFormSubmit() {
    setTimeout(showSpinner, 1);
}

function showSpinner() {
    $("body").append($('&lt;img id="spinner" src="spinner.gif" alt="Spinner" /&gt;'));
}
</code></pre>

<p><a href="http://jsfiddle.net/jgqxQ/24/" rel="noreferrer">See jsFiddle code here</a></p>

<p><a href="http://fiddle.jshell.net/jgqxQ/4/show/" rel="noreferrer">Test it in your IE browser here</a></p>


blocks|key|1543133|text|这是我所做的。你所要做的就是把你的GIF分解成10张图片(在本例中，我从01.gif开始，以10.gif结束)，并指定保存它们的目录。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1543134|HTML：|1543135|<div+id="tester"></div>|code-block|syntax|javascript|1543136|JavaScript:|BOLD|1543137|function+pad2(number)+{+++
++++return+(number+<+10+?+'0'+:+'')+%2B+number+
}
var+
++++dirURL+=+'path/to/your/images/folder',
++++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+%2B+pad2(i)+%2B+'.gif';
++++setTimeout(function()+{
++++++++set(%2B%2Bi);
++++},+100);++++
}|1543138|此方法适用于IE7、IE8和IE9+(尽管对于IE9，您可以使用spin.js)。注意：我没有在IE6中测试过这一点，因为我没有运行60年代以来浏览器的机器，尽管这种方法非常简单，甚至可能在IE6和更低版本中也能工作。|1543139|entityMap|0|LINK|mutability|MUTABLE|url|http://fgnass.github.io/spin.js/^0|10|6|1A|6|0|0|0|0|B|0|0|W|7|15|3|W|7|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@$9|19|A|1A|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|R|3|S|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|O]]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|T|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>Here's what I did. All you have to to is to break up your GIF to say 10 images (in this case i started with <code>01.gif</code> and ended with <code>10.gif</code>) and specify the directory where you keep them.</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div id="tester"&gt;&lt;/div&gt;
</code></pre>

<p><strong>JavaScript:</strong></p>

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

<p>This method works with IE7, IE8 and IE9 (althought for IE9 you could use <a href="http://fgnass.github.io/spin.js/" rel="nofollow"><code>spin.js</code></a>).
<strong>NOTE:</strong> I have not tested this in IE6 since I have no machine running a browser from the 60s, although the method is so simple it probably works even in IE6 and lower.</p>


blocks|key|1851357|text|我在处理表单提交时尝试显示加载的gif时遇到了这个问题。它增加了一层乐趣，因为同样的onsubmit必须运行一个验证器来确保表单是正确的。像其他人一样(在互联网上的每个IE/gif表单帖子上)，我不能让加载旋转器在IE中“旋转”(在我的例子中，验证/提交表单)。在浏览http://www.west-wind.com上的建议时，我发现了ev13wt的一篇帖子，该帖子暗示问题是“……IE没有将图像渲染为动画，因为渲染时它是不可见的。”这是有道理的。他的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1851358|将gif文件的位置留空，并使用JavaScript在onsubmit函数中设置源-+document.getElementById('loadingGif').src+=“gif文件的路径”。|style|BOLD|1851359|下面是我是如何实现它的：|1851360|<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+=+"/images/ajax-loader.gif";+
++++++++++++++++++++++++++++++++++++return+true;
++++++++++++++++++++++++++++++++}
++++++++++++++++++++++++++++}
++++++++++++++++++++++++}
++++++++++++++++++++}
++++++++++++++++}
++++++++++++}
++++++++}
++++++++return+false;+++
++++}+++++++++++++++
</script>

<form+name="payo"+action="process"+method="post"+onsubmit="return+validateForm(this)">
++++
++++<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>|code-block|syntax|javascript|1851361|这对我来说在所有的浏览器中都工作得很好！|1851362|entityMap|0|LINK|mutability|MUTABLE|url|http://www.west-wind.com/weblog/posts/2004/Dec/27/Animated-GIF-images-in-hidden-page-elements^0|3Q|O|0|0|0|2O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@$A|13|B|14|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|16|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|17|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>I encountered this problem when trying to show a loading gif while a form submit was processing. It had an added layer of fun in that the same onsubmit had to run a validator to make sure the form was correct. Like everyone else (on every IE/gif form post on the internet)  I couldn't get the loading spinner to "spin" in IE (and, in my case, validate/submit the form). While looking through advice on <a href="http://www.west-wind.com/weblog/posts/2004/Dec/27/Animated-GIF-images-in-hidden-page-elements" rel="nofollow" title="west-wind.com see ev13wt's post">http://www.west-wind.com</a> I found a post by ev13wt that suggested the problem was "... that IE doesn't render the image as animated cause it was invisible when it was rendered." That made sense. His solution: </p>

<p><strong>Leave  blank where the gif would go and use JavaScript to set the source in the onsubmit function - document.getElementById('loadingGif').src = "path to gif file".</strong></p>

<p>Here's how I implemented it:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    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 = "/images/ajax-loader.gif"; 
                                    return true;
                                }
                            }
                        }
                    }
                }
            }
        }
        return false;   
    }               
&lt;/script&gt;

&lt;form name="payo" action="process" method="post" onsubmit="return validateForm(this)"&gt;
    &lt;!-- FORM INPUTS... --&gt;
    &lt;input type="submit" name="submit" value=" Authorize "&gt;

    &lt;div style="display:none" id="dvloader"&gt;  
        &lt;img id="loadingGif" src="" alt="Animated Image that appears during processing of document." /&gt;
        Working... this process may take several minutes.
    &lt;/div&gt;

&lt;/form&gt;
</code></pre>

<p>This worked well for me in all browsers!</p>


blocks|key|1851489|text|在http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html上找到了这个解决方案，并且它起作用了！在设置为可见之前，只需重新加载图像即可。从按钮的onclick调用以下Javascript函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1851490|function+showLoader()
{
+++//***+Reload+the+image+for+IE+***
+++document.getElementById('loader').src='./images/loader.gif';
+++//***+Let's+make+the+image+visible+***
+++document.getElementById('loader').style.visibility+=+'visible';
}|code-block|syntax|javascript|1851491|entityMap|0|LINK|mutability|MUTABLE|url|http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html^0|1|28|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Found this solution at <a href="http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html" rel="nofollow">http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html</a> and it WORKS!  Simply re-load image before setting to visible.  Call the following Javascript function from your button's onclick:</p>

<pre><code>function showLoader()
{
   //*** Reload the image for IE ***
   document.getElementById('loader').src='./images/loader.gif';
   //*** Let's make the image visible ***
   document.getElementById('loader').style.visibility = 'visible';
}
</code></pre>


blocks|key|5378609|text|与此相关的是，我必须找到一种修复方法，将动画gif用作背景图像，以确保样式保持在样式表中。类似的修复方法也适用于我……我的脚本是这样的(我使用jQuery来使获取计算背景样式变得更容易--如何在没有jQuery的情况下做到这一点是另一篇文章的主题)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5378610|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;
}|code-block|syntax|javascript|5378611|通过更多的测试来编辑我刚刚意识到这不适用于IE8的背景图像。我已经尝试了我能想到的所有方法，让IE8在加载页面的同时渲染gif动画，但目前看起来不太可能。|5378612|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Related to this I had to find a fix where animated gifs were used as a background image to ensure styling was kept to the stylesheet.  A similar fix worked for me there too... my script went something like this (I'm using jQuery to make it easier to get the computed background style - how to do that without jQuery is a topic for another post):</p>

<pre><code>var spinner = &lt;give me a spinner element&gt;

window.onbeforeunload = function() {
  bg_image = $(spinner).css('background-image');
  spinner.style.backgroundImage = 'none';
  spinner.style.backgroundImage = bg_image;
}
</code></pre>

<p>[EDIT] With a bit more testing I've just realised that this doesn't work with background images in IE8.  I've been trying everything I can think of to get IE8 to render a gif animation wile loading a page, but it doesn't look possible at this time.</p>


blocks|key|1547412|text|基于@danfolkes的回答，这对我在IE8和ASP.NET+MVC3中起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1547413|在我们的_Layout.cshtml|1547414|<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">|code-block|syntax|javascript|1547415|>>>此处的<<<内容...|1547416|<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>|1547417|在我们的导航链接中：|1547418|<input+type="submit"+value="Finish"+class="submit-link"+onclick="ShowThrobber()"/>|1547419|或|1547420|@Html.ActionLink("DoSometthing",+"MyController",+new+{+Model.SomeProperty+},+new+{+onclick+=+"ShowThrobber()"+})|1547421|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>Building on @danfolkes' answer, this worked for me in IE 8 and ASP.NET MVC3.</p>

<p>In our _Layout.cshtml</p>

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

<p>&lt;&lt;&lt; content here >>>
        
    
...</p>

<pre><code>&lt;script type="text/javascript" language="javascript"&gt;
    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('&lt;img src="../../Content/ajax-loader.gif" alt="Progress" style="display: block; margin-left: auto; margin-right: auto"/&gt;');
         }
&lt;/script&gt;
&lt;script type="text/javascript" language="javascript"&gt;
    function HideThrobber() {
        $('#main').show();
        $('#progress').hide();
    }
&lt;/script&gt;
&lt;script type="text/javascript" language="javascript"&gt;
    $(document).ready(function () {
        HideThrobber();
    });
&lt;/script&gt;
</code></pre>

<p>And in our navigation links:</p>

<pre><code>&lt;input type="submit" value="Finish" class="submit-link" onclick="ShowThrobber()"/&gt;
</code></pre>

<p>or</p>

<pre><code>@Html.ActionLink("DoSometthing", "MyController", new { Model.SomeProperty }, new { onclick = "ShowThrobber()" })
</code></pre>


blocks|key|1851319|text|我意识到这是一个古老的问题，到目前为止，最初的发帖者已经找到了适用于他们的解决方案，但我遇到了这个问题，并发现VML标签不会成为IE+bug的受害者。当使用VML标签放置在IE浏览器上时，动画GIF在页面卸载过程中仍会移动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1851320|请注意，在决定使用VML标记之前，我首先检测到了VML，所以这在FireFox和其他使用普通动画GIF行为的浏览器中都有效。|1851321|这是我是如何解决这个问题的。|1851322|<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="/images/loading_gray.gif"+coordsize="21600,21600"></rvml:image></rvml:group></span>
++++<img+class="spinnerImage"+src="/images/loading_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+%2B+'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+%7C%7C+{},+window.jQuery);
</script>|code-block|syntax|javascript|1851323|当然，这依赖于图像和jQueryUI，并且需要某种类型的动画GIF+(“/+jQuery+/loadinggray.gif”)。|1851324|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I realize that this is an old question and that by now the original posters have each found a solution that works for them, but I ran across this issue and found that VML tags do not fall victim to this IE bug.  Animated GIFs still move during page unload when placed on the IE browser using VML tags.  </p>

<p>Notice I detected VML first before making the decision to use VML tags so this is working in FireFox and other browsers using normal animated GIF behavior.</p>

<p>Here's how I solved this.</p>

<pre><code>&lt;input class="myExitButton" type="button" value="Click me"  /&gt;

&lt;div class="loadingNextPage" style="display:none" &gt;
    &lt;span style="left:-24px; POSITION: relative; WIDTH: 48px; DISPLAY: inline-block; HEIGHT: 48px" class="spinnerImageVml"&gt;&lt;?xml:namespace prefix="rvml" ns = "urn:schemas-microsoft-com:vml" /&gt;&lt;rvml:group style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; rotation: 1deg" class="rvml" coordsize = "47,47"&gt;&lt;rvml:image style="POSITION: absolute; WIDTH: 48px; HEIGHT: 48px; TOP: 0px; LEFT: 0px" class="rvml" src="/images/loading_gray.gif" coordsize="21600,21600"&gt;&lt;/rvml:image&gt;&lt;/rvml:group&gt;&lt;/span&gt;
    &lt;img class="spinnerImage" src="/images/loading_gray.gif" alt="loading..." /&gt;
    &lt;div&gt;Just one moment while we access this information...&lt;/div&gt;
&lt;/div&gt;

&lt;script language="javascript" type="text/javascript"&gt;
    window.LoadProgress = (function (progress, $) {

        var getdialogHeight = function (height) {
            var isIE = navigator.userAgent.toLowerCase().indexOf('msie') &gt; -1;
            if (isIE) {
                return height + 'px';
            }
            return height;
        };

        var isVmlSupported = function () {
            var a = document.body.appendChild(document.createElement('div'));
            a.innerHTML = '&lt;v:shape id="vml_flag1" adj="1" /&gt;';
            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 &gt; .spinnerImage").hide();
            }
            else {
                $(".loadingNextPage &gt; .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);
&lt;/script&gt;
</code></pre>

<p>Naturally, this relies on jQuery, jQueryUI and requires an animated GIF of some type ("/images/loading_gray.gif").</p>


blocks|key|3961208|text|Jquery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3961209|$("#WhereYouWantTheImageToAppear").html('<img+src="./Animated.gif"+/>');|code-block|syntax|javascript|3961210|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Jquery:</p>

<pre><code>$("#WhereYouWantTheImageToAppear").html('&lt;img src="./Animated.gif" /&gt;');
</code></pre>


blocks|key|3961274|text|只是遇到了类似的问题。这些对我来说非常好用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3961275|$('#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');|code-block|syntax|javascript|3961276|另一个想法是使用jQuery的.load()；加载图像，然后在前面添加图像。|3961277|在IE+7%2B中工作|3961278|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Just had a similar issue. These worked perfectly for me.</p>

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

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

<p>Another idea was to use jQuery's .load(); to load and then prepend the image.</p>

<p>Works in IE 7+</p>


blocks|key|3961347|text|回答这个问题已经很晚了，但是我刚刚发现，在IE8中，使用在CSS中编码为base64+URI的背景图像，而不是作为单独的图像，仍然具有动画效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3961348|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Very, very late to answer this one, but I've just discovered that using a background-image that is encoded as a base64 URI in the CSS, rather than held as a separate image, continues to animate in IE8.</p>


blocks|key|5378928|text|一种非常简单的方法是使用jQuery和SimpleModal+plugin。然后，当我需要在提交时显示我的“加载”gif时，我会这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5378929|$('*').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}+);|code-block|syntax|javascript|5378930|entityMap|0|LINK|mutability|MUTABLE|url|http://www.ericmmartin.com/projects/simplemodal/^0|J|I|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>A very easy way is to use jQuery and <a href="http://www.ericmmartin.com/projects/simplemodal/" rel="nofollow noreferrer" title="SimpleModal plugin">SimpleModal plugin</a>.
Then when I need to show my "loading" gif on submit, I do:</p>

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


blocks|key|3961382|text|我也遇到过同样的问题，像Firefox这样的其他浏览器也很常见。最后，我发现在表单提交时动态创建一个内部带有动画gif的元素没有动画效果，所以我开发了下面的工作区。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3961383|1)在document.ready()中，页面中的每个表单都接收position:relative属性，然后每个表单都附加了一个不可见的DIV.bg-overlay。|offset|length|style|CODE|3961384|2)之后，假设我的网站的每个提交值都是由btn-primary+css类标识的，同样在document.ready()，我寻找这些按钮，遍历到每个按钮的父表单项，在表单提交时，我启动showOverlayOnFormExecution(this,true);函数，传递单击的按钮和切换DIV.bg-overlay可见性的布尔值。|3961385|$(document).ready(function()+{

++//Append+LOADING+image+to+all+forms
++$('form').css('position','relative').append('<div+class="bg-overlay"+style="display:none;"><img+src="/images/loading.gif"></div>');

++//At+form+submit,+fires+a+specific+function
++$('form+.btn-primary').closest('form').submit(function+(e)+{
++++showOverlayOnFormExecution(this,true);
++});
});|code-block|syntax|javascript|3961386|DIV.bg-overlay的CSS如下所示：|3961387|.bg-overlay
{
++width:100%25;
++height:100%25;
++position:absolute;
++top:0;
++left:0;
++background:rgba(255,255,255,0.6);
++z-index:100;
}

.bg-overlay+img
{
++position:absolute;
++left:50%25;
++top:50%25;
++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;
}|3961388|3)在任何表单提交时，都会触发以下函数，以显示覆盖在其上的半白背景(拒绝再次与表单交互的能力)和其中的动画gif+(直观地显示加载操作)。|3961389|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();
}|3961390|在表单提交时显示动画gif，而不是在这个事件中添加它，解决了各种浏览器的"gif动画冻结“问题(如上所述，我在IE和火狐中发现了这个问题，而不是在Chrome中)|BOLD|3961391|entityMap^0|0|3|G|W|H|1W|E|0|K|B|17|G|2J|12|3Y|E|0|0|0|E|0|0|0|0|0|Z|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@$D|13|E|14|F|G]|$D|15|E|16|F|G]|$D|17|E|18|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|19|8|@$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]|$D|1E|E|1F|F|G]|$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|J|3|K|5|L|7|1I|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1J|8|@$D|1K|E|1L|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1M|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1N|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1O|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|1P|8|@$D|1Q|E|1R|F|Y]]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|10|$]]

<p>I had this same problem, common also to other borwsers like Firefox. Finally I discovered that dynamically create an element with animated gif inside at form submit did not animate, so I developed the following workaorund.</p>

<p>1) At <code>document.ready()</code>, each FORM found in page, receive <code>position:relative</code> property and then to each one is attached an invisible <code>DIV.bg-overlay</code>.</p>

<p>2) After this, assuming that each submit value of my website is identified by <code>btn-primary</code> css class, again at <code>document.ready()</code>, I look for these buttons, traverse to the FORM parent of each one, and at form submit, I fire <code>showOverlayOnFormExecution(this,true);</code> function, passing clicked button and a boolean that toggle visibility of <code>DIV.bg-overlay</code>.</p>

<pre><code>$(document).ready(function() {

  //Append LOADING image to all forms
  $('form').css('position','relative').append('&lt;div class="bg-overlay" style="display:none;"&gt;&lt;img src="/images/loading.gif"&gt;&lt;/div&gt;');

  //At form submit, fires a specific function
  $('form .btn-primary').closest('form').submit(function (e) {
    showOverlayOnFormExecution(this,true);
  });
});
</code></pre>

<p>CSS for <code>DIV.bg-overlay</code> is the following:</p>

<pre><code>.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;
}
</code></pre>

<p>3) At any form submit, the following function is fired to show a semi-white background overlay all over it (that deny ability to interact again with form) and an animated gif inside it (that visually show a loading action).</p>

<pre><code>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();
}
</code></pre>

<p><strong>Showing animated gif at form submit, instead of appending it at this event, solves "gif animation freeze" problem of various browsers</strong> (as said, I found this problem in IE and Firefox, not in Chrome)</p>


<p>Does anyone know a work around to make animated GIF's continue to be animated after you click a link or submit a form on the page your on in IE? This works fine in other browsers.</p>

<p>Thanks.</p>


Animated GIF in IE stopping

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有没有人知道一个变通办法，使动画GIF继续动画后，你点击一个链接或在你的IE页面上提交一个表格？这在其他浏览器中工作得很好。谢谢。

问IE停止时的GIF动画
EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE停止时的GIF动画EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE停止时的GIF动画
EN