logo标签列表

在IE中停止动画GIF

internet-explorergifanimated-gif
110

有没有人知道如何解决在IE浏览器中点击链接或提交表单后，使动画GIF继续保持动画效果的方法？ 在其他浏览器中这个功能都能正常运行。

谢谢。

3
在这里唯一正确的答案是@AnthonyWJones。对于POST请求，实际提交（不是ajax），没有任何方法有效。 - P.Brian.Mackey
实际上这完全不是真的。在onsubmit事件中使用超时来显示图像与表单POST一起使用非常好。 - oldwizard
@P.Brian.Mackey - j.davis的解决方案对我来说甚至适用于POST请求。但是我们还使用ajaxcontrol工具包调用服务器端方法。在这种情况下它不起作用。 - Ankur-m
可能是重复的问题：Update Progress动画GIF在PostBack时停止 - Jason Kresowaty
请查看Jourdan在这里的答案（https://dev59.com/D1rUa4cB1Zd3GeqPlZ3y）。我认为这是一个更好的解决方案，而且它也适用于较早版本的IE。 - Jason Kresowaty
16个回答
99

我接受的解决方案对我无效。

经过进一步的研究，我找到了这个解决方法，它实际上是有效的。

以下是要点：

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/>标签将被插入，但由于某种原因，它不受ie动画问题的影响。

已在Firefox、ie6、ie7和ie8中进行了测试。

3
Source: http://www.webproworld.com/graphics-design-discussion-forum/63262-gif-show-page-loading.html - j.davies
8
在您的代码中，实际上从未执行过POST请求，只有"onclick="JavaScript调用。当您单击提交按钮时，会期望执行POST请求，但我尝试了一下，并没有起作用。 - P.Brian.Mackey
2
-1 这个答案也是错的。它在IE7和IE8中不起作用，提交表单后gif图像会冻结。 - Marco Demaio
2
使用jQuery对我很有用。我必须承认，这个hack非常奇怪。这是它在我的例子中的工作方式：code <div id="img_content"> <img id='aj_loader' src='assets/2631.gif' style="display:none;"/> </div>然后：code $("#img_content").html($("#img_content").html()); - misaizdaleka
这在我的Chrome上不起作用。Chrome尝试重新加载图像，但GET请求被取消了。 我曾经在IE上使用过这个解决方法几天。但是今天它停止工作了。我就是想不出问题出在哪里。 - Ankur-m
显示剩余10条评论
35
更正一下，它可以工作，但在页面加载完成之前就停止动画了。因此，如果加载时间很短，它看起来就像原始问题中的动画冻结了。 - James McMahon
很棒的解决方案，在ie11中运行良好，因此仍然似乎是最新和受支持的。 - Adam Knights
spin.js很遗憾地占用了相当多的CPU。请参见[issues/8]（https://github.com/fgnass/spin.js/issues/8），[issues/200]（https://github.com/fgnass/spin.js/issues/200），[issues/215]（https://github.com/fgnass/spin.js/issues/215）。 - user247702
Spin.js在我的iPhone上无法工作。当页面重定向到另一个页面时，它也会冻结。 - Ankur-m
18

IE假设单击链接意味着进行新的导航，当前页面内容将被替换。 为了准备这一过程，它会停止动画GIF的代码执行。 我怀疑你对此无能为力（除非你实际上没有进行导航，在这种情况下，请在onclick事件中使用return false）。

+1 - 我尝试了两个最佳答案，但都不起作用。我不想把所有的表单提交都变成ajax请求。 - P.Brian.Mackey
2
+1 我同意，这是唯一真正正确的答案，除了 spin.js 和 CodeMonkey 的解决方法。 - Marco Demaio
这个IE问题在IE6中存在，现在在IE7/8中仍然存在。有人知道它是否还存在于IE9中吗？ - Marco Demaio
仍然在2016年！ - Robert Ngetich
2
2017年报道！ - Steve Wakeford
17

这里有一个 jsFiddle，在表单提交时使用 method="post" 完全正常。旋转器是在表单提交事件中添加的。

$("form").bind("submit", onFormSubmit);

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

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

这里查看 jsFiddle 代码

在您的 IE 浏览器中测试

2
是的，这个很好用（目前只在IE10中测试过）。但是当我预加载图像到内存中时，我无法弄清楚为什么动画会停止。我可以在您的Fiddle中预加载，它可以正常工作，但在我的代码中却不行，烦死了。 - Simon East
你做错了些什么。 :) 将旋转图像作为img标签添加到您的页面中？我已经更新了URL。可能会有所帮助。 - oldwizard
IE看起来就是个混蛋。在预加载时会停止动画。当通过jQuery注入时，动画将继续运行。感谢这个解决方案。 - Anthony
8
我看到了这篇文章，虽然已经有答案了，但我觉得还是应该发一些关于IE 10的问题解决方法，也许能够帮助其他出现相似问题的人。
我曾经因为IE 10不能正常显示动态图片而感到困惑，后来找到了一个好方法。

工具→Internet选项→高级选项→多媒体→在网页中播放动画
希望这个方法能够帮到你。
不，那并不能解决IE11中的问题（但+1让人感激你的帮助）！:( 这意味着——我已经启用了这个选项，在beforeunload或unload事件中显示的动画GIFs不会动画。 - trejder
1
这与问题所提出的问题无关。 - user247702
2
这是我所做的。你只需要将你的GIF分成10张图片（在这种情况下，我从01.gif开始到10.gif结束），并指定它们所在的目录即可。 HTML： 
<div id="tester"></div>

今日免费次数已满, 请开通会员/明日再来
function pad2(number) {   
    return (number < 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 > 10) i = 1;    
    img.src = dirURL + pad2(i) + '.gif';
    setTimeout(function() {
        set(++i);
    }, 100);    
}

这种方法适用于IE7、IE8和IE9(虽然对于IE9，你可以使用spin.js).

注意:由于我没有运行60年代的浏览器，因此我没有在IE6中测试过这种方法，但这种方法非常简单，即使在IE6及更低版本中也可能有效。
1
这个解决方法是可行的，基于spin.js相同的原理，基本上使用JS setTimeout来模拟gif动画。 - Marco Demaio
2

我在http://timexwebdev.blogspot.com/2009/11/html-postback-freezes-animated-gifs.html找到了这个解决方案，并且它有效！只需要在将图像设置为可见之前重新加载即可。从您的按钮的onclick调用以下JavaScript函数：

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';
}
虽然这在至少IE11中可以工作，但我注意到当我在运行各种版本的Windows上测试Firefox 85时会出现一些问题。不过这是在BrowserStack上进行的，所以需要保留一些怀疑。 - Bower
2
当我尝试在表单提交时显示加载gif时，遇到了这个问题。由于相同的onsubmit必须运行验证器以确保表单正确，因此增加了一层乐趣。像其他人一样（在互联网上的每个IE/gif表单帖子上），我无法使加载旋转器在IE中“旋转”（在我的情况下，验证/提交表单）。在查看有关http://www.west-wind.com的建议时，我发现ev13wt发布的文章指出问题是“……因为IE在呈现图像时不会将其呈现为动画而导致它是不可见的。”这很有道理。他的解决方案：

在gif应该放置的位置留空，并使用JavaScript在onsubmit函数中设置源 - document.getElementById('loadingGif').src =“gif文件路径”。

以下是我的实现方法：

<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)">
    <!-- 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>

这在所有浏览器中都对我有效！

在我的IE11中，设置src也起作用了。在我的情况下，它与重新添加img html结合使用。我不确定为什么我需要两者兼备。值得注意的是，我还设置了'display' （为block），而不是修改'visibility'。 - Xtopher
1

关于这个问题，我不得不找到一个解决方案，其中动画GIF被用作背景图像，以确保样式保持在样式表中。类似的解决方案也适用于我...我的脚本大致如下（我使用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;
}

[编辑] 经过更多的测试，我刚刚意识到这在IE8中不适用于背景图片。我一直在尝试我能想到的一切来让IE8在加载页面时呈现gif动画，但目前看起来似乎不可能。

为什么你在使用jQuery($(spinner).css('background-image'))读取CSS代码，但是在设置时却使用了纯Javascript的方式(spinner.style.backgroundImage)。你的代码在任何浏览器中都无法正常工作。如果我直接使用你的代码，那么我会得到cannot set backgroundImage property of undefined错误。如果我更改你的代码以使用jQuery设置CSS，则代码可以正常运行而不会出现任何错误，但是图像未被重置，div / spinner元素仍为空。我不知道为什么？ - trejder
已验证！你的代码没有可能生效。截至2014年12月，任何浏览器均无法在unload或beforeunload事件中设置background-image属性。详见此问题或此jsFiddle。 - trejder
1
在 @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">
<<内容在此>> 
<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()" })
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接