Проблема с отображением содержания страницы перед запуском вашего лоадера может возникнуть из-за того, что 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');
});
Это гарантирует, что контент не будет виден до момента, когда ваш лоадер будет готов к работе, и после этого он будет отображаться нормально.