Internet explorer IE7/IE8和冻结动画GIF

我很肯定这是个老问题

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

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

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

最奇怪的是，在另一页上，一切都像一个符咒

顺便说一句，不抱怨我是很痛苦的。。。啊

编辑：

用span环绕：

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

---

神秘的是，它现在起作用了。

我曾经遇到过这个。如果我尝试使用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>

正在处理您的PayPal交易，请稍候。。。

然后在短时间延迟后使用JavaScript切换div的可见性（这是使用原型库的旧版本，但您明白了这一点）：

//我们必须通过setTimeout（）调用此函数，否则IE7将无法调用
//在加载下一页时设置GIF动画。
var fnHideConfirmation=函数（）{
元素隐藏（‘确认区域’）；
元素显示（'伪进度区域'）；
};    

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

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

---

因此，与其延迟src属性的更改，不如将它放在一边，只是延迟对整个showLoading（）函数的调用。祝你好运

适用于此用例。

我发现接受的答案理解或实现起来有点复杂，但我在执行此操作时遇到了相同的问题

我有下面的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>

但它并没有制作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";
}

函数onSubmit（）{
setTimeout（showProgress，500）；
}
函数showProgress（）{
var divProgressWheel=document.getElementById（“progress\u wheel\u div”）；
divProgressWheel.innerHTML=“

function onSubmit() {

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

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";
}

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

    </div>