动画 gif 不是动画答案

【问题标题】：animated gif is not animating动画 gif 不是动画
【发布时间】：2014-08-29 19:43:03
【问题描述】：

我在母版页中有一个动画 gif，它将加载每当用户单击某些按钮时。 gif 在 IE 中显示但没有动画。我在 div 中添加了 hide(ZURB) 类，并根据这个类显示和隐藏 div(addClass/removeClass Jquery)。

注意： gif 动画，如果我在 Jquery 中使用 hide() 和 show() 方法并删除 zurb css 类 '.hide' 我已经添加了。

我想将 div 的可见性设置为隐藏在母版页中，然后仅在几个子页面中切换它。我怎样才能做到这一点？

CSS：

#loading{position:fixed;top:0px;right:0px;width:100%;height:100%;background-color:#666;background-image:url('ajax-loader.gif'); background-repeat:no-repeat;background-position:center;z-index:10000000;  opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */}

HTML 母版页：

  <div id="loading" runat="server" class="hide"></div>

子页面中的Jquery：

 $("#<%=Master.FindControl("loading").ClientID %>").removeClass("hide");

隐藏的CSS（Zurb）：

.hide {
  display: none !important;
}

【问题讨论】：

标签： jquery css asp.net

【解决方案1】：

您需要重新渲染 img onclick。试试类似的东西

function showProgress() {
        var pb = document.getElementById("progressBar");
        pb.innerHTML = '<img src="./progress-bar.gif" width="200" height ="40"/>';
        pb.style.display = '';
    }

and in your html:

<input type="button" value="button" onclick="showProgress()" />
<div id="progressBar" style="display: none;">
    <img src="./progress-bar.gif" width="200" height ="40"/>
</div>

查看类似帖子here

【讨论】：

【解决方案2】：

这是一个已知的 IE 限制。您可以加载和设置显示：无；然后，当用户单击某个按钮时，您可以将可见性设置为 true。两个有用的链接： Animated GIF in IE stopping 和 IE7/IE8 and frozen animated gifs

【讨论】：