Как сделать фон предварительного загрузчика, чтобы он соответствовал всей странице с текущим GIF? - PullRequest
Новая
       27

Как сделать фон предварительного загрузчика, чтобы он соответствовал всей странице с текущим GIF?

1 голос
/ 11 июля 2019

Я пытаюсь помочь моему брату создать предварительный загрузчик, для которого он делает пользовательский 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>

1 Ответ

0 голосов
/ 11 июля 2019

установите 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;
...