Задать вопрос
@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';
    }
})
  • Вопрос задан
  • 90 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Помогут разобраться в теме Все курсы
  • Нетология
    Fullstack-разработчик на Python + нейросети
    20 месяцев
    Далее
  • Skillfactory
    Профессия Веб-разработчик
    12 месяцев
    Далее
  • Академия Eduson
    Fullstack-разработчик на JavaScript
    11 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 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');
});

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Разработчик (Next.js / JavaScript / TypeScript)
App Company
от 200 000 до 300 000 ₽
Web-разработчик/WordPress программист (Full-stack)
JustBusiness • Санкт-Петербург
от 130 000 до 150 000 ₽
Верстальщик / фронтендер для браузерного расширения
DevTeam.Space
от 1 000 до 2 000 $
Ещё вакансии