如何制作预加载器背景以适应当前 gif 的整个页面？

Question

我正在尝试帮助我的兄弟创建一个他为其制作自定义 GIF 的预加载器，但我们运行遇到了 gif 需要一定大小以及预加载器掩码的问题一切都在满载之前。我一直在尝试调整我在 CodePen 上获得的一些代码，这就是我目前所拥有的。这是我们想要它做的一个例子，那个 GIF，但不想看到预加载器后面的任何其他内容。

var preloader;

function preload(opacity) {
    if(opacity <= 0) {
        showContent();
    }
    else {
        preloader.style.opacity = opacity;
        window.setTimeout(function() { preload(opacity - 0.05) }, 100);
    }
}

function showContent() {
    preloader.style.display = 'none';
    document.getElementById('content').style.display = 'block';
}

document.addEventListener("DOMContentLoaded", function () {
    preloader = document.getElementById('preloader');
    preload(1);
});

body {
  background: url('https://www.studio-aegis.com/uploads/1/0/3/8/10380626/background-images/245373741.png') no-repeat center center;
  color: white;
}
#preloader {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
    overflow: visible;
    background: url('https://www.studio-aegis.com/uploads/1/0/3/8/10380626/custom_themes/921719032455054188/files/Orphan---Run.gif') no-repeat center center;
  background-size: contain;
 }

#content {
    display: none;
 }

 <body>
    <div id="preloader"></div>
    <div id="content">Page content!</div>
  </body>

Answer 1

将background-color设置为#000并将背景更改为background-image，如

background-image: url(https://www.studio-aegis.com/uploads/1/0/3/8/10380626/custom_themes/921719032455054188/files/Orphan---Run.gif);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-color: #000;

如何制作预加载器背景以适应当前 gif 的整个页面？

How to make a preloader background to fit the entire page with current gif?

html

css

jquery

preloader

codepen