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

Posted 2023-03-25

【中文标题】隐藏后如何在 IE 中制作 gif 动画？

【英文标题】：How do I make a gif to animate in IE after it was hidden?

【发布时间】：2020-06-02 14:46:22

【问题描述】：

我想在 IE 中显示一个 gif 并且没有动画。首先我添加了隐藏类（显示：无） 然后我用 jquery 的 .show() 方法显示它。 问题是 gif 没有动画，但是如果我第一次打开页面时它是可见的，那么它就可以工作。 我找不到让它适用于我的情况的方法。

代码：

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

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

【参考方案1】：

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

<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

【讨论】：

我想我可以使用动画而不是 gif。谢谢！