预加载重型GIF图像

Question

我有一个重型过程，需要几秒钟才能完成。

这就是为什么我添加了一个动画加载页面以使等待可接受。

<style>
   .modal_gif {
      display:    none;
      position:   fixed;
      z-index:    1000;
      top:        0;
      left:       0;
         height:     100%;
         width:      100%;
         background: rgba( 255, 255, 255, .8 ) 
         url('static/loading.gif') 
         50% 50% 
         no-repeat;
         background-size: 80%, auto;
        }
    body.loading .modal_gif {
         overflow: hidden;   
         }
         body.loading .modal_gif {
         display: block;
         }
        
 </style>
<script>
       $(document).on({
          ajaxStart: function() { $body.addClass("loading");    },
          ajaxStop: function() { $body.removeClass("loading"); }    
    });
</script>

但是，GIF重约1MB，在第一个请求后未显示：屏幕上只有半透明的面纱。

第二个和以下请求运行良好，这使我认为这是一个GIF加载问题。

我希望在要求时始终显示动画加载GIF，即使是第一个请求也是如此。

您知道如何将gif动画文件预加载为“隐藏”并为第一个请求显示？

Answer 1

您可以尝试使用虚拟img标签（隐藏可见性，而不显示无）预加载它。如果我们这样做，您就可以首先：

.modal_gif {
  visibility: hidden;
  display: block;
  pointer-events: none;
}

body.loading .modal_gif {
  visibility: visible;
  overflow: hidden;
}

甚至使用不透明度0或不透明度1播放，这里的密钥是指针 - 事件：无;，因此可以单击图像。