Возникли проблемы при размещении встроенного JS во внешнем JS и получении того же результата - PullRequest
Новая
       26

Возникли проблемы при размещении встроенного JS во внешнем JS и получении того же результата

0 голосов
/ 24 апреля 2020

Я пытаюсь создать предварительный загрузчик gif для проекта, который у меня есть. В ходе курса, предшествующего текущему, нам было разрешено разместить JS в строке, например: 

<script>
    let loader = document.getElementById("loader");

    window.addEventListener("load", function () {
        loader.style.height = "400px";
        loader.style.width = "400px";
        loader.style.borderRadius = "50%";
        loader.style.visibility = "hidden";
    });

</script>

Это выполнялось со следующими HTML и CSS: 

HTML

<div id="loader">
    <img src="images/pepper.gif" alt="loading animation"/>
</div>

CSS

#loader {
    height: 2000px;
    width: 2000px;
    background-color: black;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    transition: all .5s;
}

#loader img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Это сработало просто отлично. Однако в этом курсе мы просим поместить наш JS во внешний файл.

Я связал файл следующим образом 

<script src="js/index.js"></script>

в теге head HTML.

JS выглядит следующим образом (мы должны использовать IIFE): 

(function () {

    "use strict";

    let loader = document.getElementById("loader");

    window.addEventListener("load", function () {
        loader.style.height = "400px";
        loader.style.width = "400px";
        loader.style.borderRadius = "50%";
        loader.style.visibility = "hidden";
    });
})();

Моя проблема в том, что теперь gif будет оставаться на экране навсегда, когда во внешнем файле , Когда он был встроен, он немного загружался, а затем отображал содержимое сайта. Может ли кто-нибудь помочь мне исправить это?

1 Ответ

1 голос
/ 24 апреля 2020

Если ваш JS находится в части <head>, document.getElementById("loader") будет null, потому что вы не ждете готовности DOM, поэтому он еще не существует. Если вы откроете консоль разработчика вашего браузера с помощью F12 , вы увидите:

Uncaught TypeError: Невозможно прочитать свойство 'style' из null

Либо поместите ваш скрипт прямо перед закрывающим тегом </body>, либо оберните ваш код: 

addEventListener('DOMContentLoaded', function() { /* code */ });
...