预加载重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，这里的关键是pointer-events: none;，所以图像可以点击通过。