Почему перед загрузкой лоадером на момент видно саму страницу?
Когда захожу на сайт, мелькает сначала сам сайт и сразу появляется лоадер. Скрипт стоит самым первым в списке, в чем может быть причина?
Вот сам лоадер:
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'; } }) |
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'; } })
Дополнительно:
зачем скрывать лоудер через скрипт, если можнопрсото скрыть через стили, которые выполнятся 100% быстрее js
Ответы:
Проблема с отображением содержания страницы перед запуском вашего лоадера может возникнуть из-за того, что JavaScript выполняется асинхронно, и браузер начинает отображать страницу до завершения выполнения вашего скрипта. Чтобы избежать моментального отображения контента перед запуском лоадера, вы можете воспользоваться CSS для скрытия контента до тех пор, пока ваш лоадер не будет готов к работе.
Вот как это можно сделать:
1. Создайте CSS-класс для скрытия содержимого страницы. Например:
.hidden-content { display: none; } |
.hidden-content { display: none; }
2. Примените этот класс к вашему элементу, чтобы скрыть содержание по умолчанию:
<body class="hidden-content"> <!-- Ваш контент здесь --> </body> |
<body class="hidden-content"> <!-- Ваш контент здесь --> </body>
3. В вашем JavaScript скрипте, когда ваш лоадер готов к отображению, вы можете удалить класс `hidden-content` из элемента, чтобы отобразить контент:
// В вашем JavaScript скрипте, когда лоадер готов document.addEventListener('DOMContentLoaded', () => { // ... Ваш код лоадера ... // Удалите класс 'hidden-content' со страницы, чтобы показать контент body.classList.remove('hidden-content'); }); |
// В вашем JavaScript скрипте, когда лоадер готов document.addEventListener('DOMContentLoaded', () => { // ... Ваш код лоадера ... // Удалите класс 'hidden-content' со страницы, чтобы показать контент body.classList.remove('hidden-content'); });
Это гарантирует, что контент не будет виден до момента, когда ваш лоадер будет готов к работе, и после этого он будет отображаться нормально.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Прежде чем загрузить лоадер на страницу, необходимо убедиться, что контент страницы загружен полностью и готов к отображению. В противном случае, пользователь увидит "момент видно саму страницу" до того, как лоадер начнет свою работу.
Существует несколько способов обеспечить правильную последовательность загрузки контента и лоадера на странице. Один из них - использовать CSS для отображения лоадера поверх контента, который уже загружен. Например, можно установить контейнеру с лоадером свойство `position: absolute`, чтобы разместить его поверх других элементов.
Еще один подход - использовать JavaScript для управления видимостью лоадера в зависимости от статуса загрузки страницы. Например, можно добавить класс к контейнеру с лоадером при начале загрузки страницы и убрать его по завершении загрузки.
Пример кода на JavaScript:
document.addEventListener("DOMContentLoaded", function() { // Показываем лоадер document.getElementById("loader").style.display = "block"; // Скрываем лоадер после загрузки контента window.addEventListener("load", function() { document.getElementById("loader").style.display = "none"; }); });
Таким образом, с помощью правильного управления видимостью элементов на странице с помощью CSS и JavaScript, можно предотвратить появление "момента видно саму страницу" перед загрузкой лоадера.