我正在尝试帮助我的兄弟创建一个他为其制作自定义 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>最佳答案
将背景颜色设置为#000 并将背景更改为背景图像
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;
关于jquery - 如何制作预加载器背景以适应当前 gif 的整个页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56994907/