隐藏后如何在 IE 中制作 gif 动画？

Question

我想在 IE 中显示 gif 而不是动画。首先我给它添加了 hide class(display: none) 然后我用 jquery 中的 .show() 方法展示它。问题是 gif 没有动画，但如果我第一次打开页面时可见，那么它就可以工作。我找不到适合我的情况的方法。

代码：

<img src="~/Content/images/circular-loading.gif" id="loginLoadingGif" class="hide" />

$('#loginLoadingGif').show();

Answer 1

请参考下面的代码，它使用.loader div 显示加载图像，并使用 CSS 可见性属性显示和隐藏加载图像（你可以将其更改为 CSS 显示属性，并使用 "none" 和 "block" 值 hide/show 图像）：

<style type="text/css">
    .contents{
      visibility:hidden;
    }
    .loader {
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid blue;
      border-right: 16px solid green;
      border-bottom: 16px solid red;
      border-left: 16px solid pink;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
</style>

<script type="text/javascript">
    document.onreadystatechange = function () {
        var state = document.readyState
        if (state == 'interactive') {
            document.getElementById('contents').style.visibility = "hidden";
        } else if (state == 'complete') {
            setTimeout(function () {
                document.getElementById('interactive');
                document.getElementById('load').style.visibility = "hidden";
                document.getElementById('contents').style.visibility = "visible";
            }, 2000);
        }
    }

    function LoadImage(){
         document.getElementById('load').style.visibility = "visible";
         setTimeout(function () {
                document.getElementById('interactive');
                document.getElementById('load').style.visibility = "hidden";
                document.getElementById('contents').style.visibility = "visible";
            }, 3000);
    }
</script>

<form id="form1" runat="server">
    <div id="load" class="loader"></div>
    <div id="contents" class="contents">
        This is testing
    </div>
    <input type="button" id="btnShow" value="Show Loader" onClick="LoadImage();">
</form>

输出如下（当页面加载时，它会显示加载图像，页面加载后，如果我们点击 Show Loader 按钮，它会显示加载图像，3秒后，它会隐藏图像） :

参考：

How TO - CSS Loader

Display (Show) Loading Progress GIF Image when Page Loads in ASP.Net MVC

隐藏后如何在 IE 中制作 gif 动画？

How do I make a gif to animate in IE after it was hidden?

jquery

internet-explorer

gif

twitter-bootstrap