IE7/IE8 和冻结的 GIF 动画答案

【问题标题】：IE7/IE8 and frozen animated gifsIE7/IE8 和冻结的 GIF 动画
【发布时间】：2010-12-20 16:33:39
【问题描述】：

我很确定这是一个老问题。

这就是我渲染动画 gif 的方式：

 <img id='loading' alt='loading' style="display: none; position:  
    relative; left:10px; top:2px;" src="<%= Url.Image("loading.gif") %>" />

这就是我现在拼命想要展示的方式：

showLoading: function(gifId, butId) {
        var n = gifId != undefined ? gifId : 'loading';
        var l = $('#' + n);

        //if browser is stupid
        if ('v' == '\v') {
            var s = l.attr('src');
            var x = document.getElementById(n);
            x.style.visibility = "visible";
            x.style.display = "inline";
            setTimeout("document.getElementById('" + n + "').src = '"+s+"';",  
                        100);
        } else {
            l.show();
        }
        if (butId != undefined)
            $('#' + butId).css('cursor', 'default').attr("disabled", true);
    },

问题： 动画 gif 显示冻结，没有动画

最奇怪的是，在其他页面上，一切都像魅力一样。

附：不吐槽 IE 是很痛苦的……啊……

编辑：

用 span 环绕：

  <span id='loading' style='display: none;
                position: relative; left: 0px; top: 2px;'>
                <img alt='loading' src="<%= Url.Image("loading.gif") %>" />
            </span>

把js改成：

 if ('v' == '\v') {
            var f = function() {
                l.show();
                l.attr('src', l.attr('src'));
            };
            setTimeout(f, 100);
        } else {
            l.show();
        }

而且很神秘 - 它现在可以工作了。

【问题讨论】：

你可以吐槽IE，没人会生气。我有同样的错误...通常 IE 并不喜欢 .src。如果我是你，我会用别的东西来做
Reseting src 是一个可以解决这个问题的 hack (ryantetek.com/2009/06/…)。不知何故，它没有。
不...我不应该为此大吵大闹。材料太多了。肯定会被禁言。 :D

标签： internet-explorer animated-gif

【解决方案1】：

我遇到过一次。如果我尝试使用 JavaScript 在浏览器移动到需要一段时间才能加载的页面时显示一点加载抖动，IE 不会为 GIF 设置动画。我通过将加载 throbber 直接放入隐藏的 div 中的 HTML（不是通过 JavaScript 插入）来解决它：

<div id="pseudo-progress-area" style="display: none;">
    <h3>Please wait while we process your PayPal transaction...</h3>
    <p style="text-align: center;">
        <img src="/Media/Template/Images/LoadingProgressBar.gif" alt="" />
    </p>
</div>

然后在短暂延迟后使用 JavaScript 切换 div 的可见性（这是使用旧版本的 Prototype 库，但你明白了）：

<script type="text/javascript">    
    // We have to call this function via a setTimeout() or else IE7 won't
    // animate the GIF as the next page is loading.
    var fnHideConfirmation = function() {
        Element.hide( 'confirmation-area' );
        Element.show( 'pseudo-progress-area' );
    };    
</script>

该功能在表单的提交按钮中触发：

<input 
    type="submit"
    class="button"
    name="SubmitConfirmation"
    value="Buy Now →"
    onclick="setTimeout(fnHideConfirmation, 50);" />

因此，与其延迟 src 属性更改，不如将其搁置一旁，然后延迟对整个 showLoading() 函数的调用。祝你好运！

【讨论】：

谢谢。不知何故奏效了。我什至不想知道究竟是什么修复了它。 :D
哈！我会告诉你，但我不记得为什么它会修复它，只是它修复了它。 =)
@NicholasPiasecki 这对我不起作用你能帮我吗？ :(

【解决方案2】：

Spin.js 适用于此用例。

【讨论】：

【解决方案3】：

我发现接受的答案有点难以理解或实施，但是我在执行此操作时遇到了同样的问题，

我有以下 HTML

<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;">
    <img src="images/progress_wheel.gif" style="margin-top: 204px;"/>
    <p class='arbitText' style="font-weight: bold;">Processing, Please wait!</p>
</div>

在java脚本中我正在这样做

function onSubmit() {

   var divProgressWheel = document.getElementById("progress_wheel_div");
   divProgressWheel.style.display = "block";
}

但它不是动画 gif 文件，

解决方案

更新了我的 java 脚本并使其如下所示

function onSubmit() {    
   setTimeout(showProgress, 500);
}

function showProgress() {

    var divProgressWheel = document.getElementById("progress_wheel_div");

    divProgressWheel.innerHTML = "<img src='images/progress_wheel.gif' style='margin-top: 204px;'/><p class='arbitText' style='font-weight: bold;'>Processing, Please wait!</p>";
    divProgressWheel.style.display = "block";
}

请注意 divProgressWheel.innerHTML 与我在 html 中的相同。因此，我们可以删除不必要的 html，因此修改后的 html 将是；

<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;">

    </div>

【讨论】：