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，如

user.update_columns(updated_at: Time.current)

如何使预加载器背景适合当前gif整个页面？

1 个答案: