Задать вопрос
@luxurypluxury
javascript

Почему перед загрузкой лоадером на момент видно саму страницу?

Когда захожу на сайт, мелькает сначала сам сайт и сразу появляется лоадер. Скрипт стоит самым первым в списке, в чем может быть причина?

Вот сам лоадер:
document.addEventListener('DOMContentLoaded', () => {
    const body = document.querySelector('body');
    const slash = document.querySelector('.loader-char');
    const loader = document.querySelector('.loader');
    const cookie = document.cookie.includes("loaderPlayed=true");

    const startLoader = () => {
        loader.style.display = 'flex';
        body.classList.add('overlay__opened');
        const counterElement = document.querySelector(".loader-counter");
        let currentValue = 0;
        const slashAnimation = gsap.timeline({ repeat: -1, repeatDelay: 0.5 });

        slashAnimation
            .to(slash, {
                rotation: 360,
                duration: 2,
                ease: Power1.easeInOut
            })
            .to(
                slash,
                {
                    duration: 0.5,
                    ease: Elastic.easeOut.config(1, 0.3)
                },
                "-=0.2"
            )
            .to(
                slash,
                {
                    duration: 0.5,
                    ease: Elastic.easeOut.config(1, 0.3)
                }
            );

        gsap.to([".loader-counter", ".loader-char", ".loader-text"], 0.25, {
            delay: 3.5,
            height: 0,
            opacity: 0
        })

        gsap.to(".loader-bar", 1.5, {
            delay: 3.5,
            height: 0,
            stagger: {
                amount: 0.5
            },
            ease: "power4.inOut"
        })

        gsap.to(".loader", 0.25, {
            delay: 4.7,
            onComplete: function () {
                document.querySelector(".loader").style.display = "none";
            }
        })

        const updateCounter = () => {
            if (currentValue === 100) {
                setTimeout(() => {
                    body.classList.remove('overlay__opened');
                    setLoaderPlayedCookie();
                }, 1000)
                return;
            }

            currentValue += Math.floor(Math.random() * 10) + 1;

            if (currentValue > 100) {
                currentValue = 100;
            }

            counterElement.textContent = currentValue;

            let delay = Math.floor(Math.random() * 200) + 50;
            setTimeout(updateCounter, delay);
        }
        updateCounter();
    }

    const setLoaderPlayedCookie = () => {
        const expirationDate = new Date();
        expirationDate.setHours(expirationDate.getHours() + 1);
        document.cookie = "loaderPlayed=true; expires=" + expirationDate.toUTCString() + "; path=/";
    }

    if (!cookie) {
        startLoader();
    } else {
        loader.style.display = 'none';
    }
})
  • Вопрос задан
  • 70 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 1
@romant094
Frontend-developer
Проблема с отображением содержания страницы перед запуском вашего лоадера может возникнуть из-за того, что JavaScript выполняется асинхронно, и браузер начинает отображать страницу до завершения выполнения вашего скрипта. Чтобы избежать моментального отображения контента перед запуском лоадера, вы можете воспользоваться CSS для скрытия контента до тех пор, пока ваш лоадер не будет готов к работе.

Вот как это можно сделать:

1. Создайте CSS-класс для скрытия содержимого страницы. Например:
.hidden-content {
  display: none;
}

2. Примените этот класс к вашему элементу, чтобы скрыть содержание по умолчанию:
<body class="hidden-content">
  <!-- Ваш контент здесь -->
</body>

3. В вашем JavaScript скрипте, когда ваш лоадер готов к отображению, вы можете удалить класс `hidden-content` из элемента, чтобы отобразить контент:
// В вашем JavaScript скрипте, когда лоадер готов
document.addEventListener('DOMContentLoaded', () => {
  // ... Ваш код лоадера ...

  // Удалите класс 'hidden-content' со страницы, чтобы показать контент
  body.classList.remove('hidden-content');
});

Это гарантирует, что контент не будет виден до момента, когда ваш лоадер будет готов к работе, и после этого он будет отображаться нормально.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо поменять пароль в WINDOWS
24 нояб. 2024, в 03:11
500 руб./за проект
Требуется консультация по UX-дизайну казино
24 нояб. 2024, в 01:35
5000 руб./за проект
Расширение для браузера
24 нояб. 2024, в 01:24
500 руб./за проект
Ещё заказы