Задать вопрос
@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';
    }
})
  • Вопрос задан
  • 59 просмотров
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 разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Рассылка в WhatsApp
03 мая 2024, в 13:25
2000 руб./за проект
Настроить рекламу в Яндекс.Директ (с опытом в сфере стоматологии)
03 мая 2024, в 13:16
1999 руб./в час
Разработка страницы статьи на сайте на WordPress
03 мая 2024, в 13:03
1000 руб./в час
Ещё заказы