Раздел загрузки не исчезает при первой загрузке

Question

Я сделал загрузчик, который использует css и javascript для воспроизведения анимации. При первой загрузке сайта анимация иногда не воспроизводится, оставляя пустой белый экран. Я считаю, что это как-то связано с кэшированием при второй загрузке, которое заставляет его работать. Заранее спасибо.

HTML:

    <section id="loading">
        <div class="circle spin"></div>
        <img src="src/j2.svg" alt="J2 Logo">
    </section>
    <link rel="stylesheet" href="css/loading.css">
    <script type="text/javascript" src="scripts/loading.js"></script>

загрузка. css: https://pastebin.com/E16PMTtQ

загрузка. js: https://pastebin.com/1X09KatC

Ссылка на сайты https://j2.business

Answer 1

При быстром взгляде на ваш код создается впечатление, что весь код выполняется при загрузке javascript -файла. Это может быть проблема синхронизации (ваш javascript -файл извлекается быстрее, чем ваша HTML -страница: элементы, с которыми он хочет работать, еще не доступны).

С jQuery вы можете быстро решить эту проблему, внедрив свои переменные и функции в этот держатель:

$( document ).ready(function() {
    // place code here, the document is waiting
});

Поскольку вы не используете jQuery, вы можете использовать это:

добавьте атрибут "defer".

<script type="text/javascript" src="scripts/loading.js" defer></script>

Этого должно быть достаточно, спецификации найдены здесь:

https://www.w3schools.com/tags/att_script_defer.asp

Или если вы хотите, чтобы при загрузке документа выполнялись только некоторые функции Вы можете использовать функцию, которую поддерживают все браузеры:

(function() {
    // place code here, the document is waiting
})();