Форум

Chile · #1 (**permalink**) 21.06.2022, 20:40

Добрый вечер, товарищи!

Есть вот такое:

<body style="visibility: hidden" onload="setTimeout ('document.body.style.visibility = \'visible\'', 0)">

<script type="text/javascript">
     /* <![CDATA[ */
     window.addEventListener('load', () => { /* Страница загружена, включая все ресурсы */
         const preloader = document.querySelector('.preloader') /* находим блок Preloader */
         preloader.classList.add('preloader_hidden') /* добавляем ему класс для скрытия */
        })
    /* ]]> */
</script>

Всё что в body, делает всё для того, чтобы во время обновления страницы не отображалась вёрстка без стилей. Ну, а скрипт — прелоадер. Очень хочется всё это объеденить в один скрипт «малой кровью», т. е. с минимумом кода, чего сам я сделать не могу, поскольку в javascript — полный нуб. Помогите, товарищи!

рони · #2 (**permalink**) 21.06.2022, 20:46

Chile,
подожду переводчика ...

Chile · #3 (**permalink**) 21.06.2022, 20:52

Сообщение от рони

Chile,
подожду переводчика ...

Ну это не весь код

<body style="visibility: hidden" onload="setTimeout ('document.body.style.visibility = \'visible\'', 0)">
		
		<div class="preloader"></div>
		
		<div class="content">

               </div>
                <script type="text/javascript">
			/* <![CDATA[ */
			window.addEventListener('load', () => { /* Страница загружена, включая все ресурсы */
				const preloader = document.querySelector('.preloader') /* находим блок Preloader */
				preloader.classList.add('preloader_hidden') /* добавляем ему класс для скрытия */
			})
			/* ]]> */
		</script>
                
</body>

На самом деле, задача проста — прелоадер, но, чтобы при обновлении страницы (и переходе по ним), не отображалась вёрстка без стилей (прыгают шрифты и прочее непотребство).

рони · #4 (**permalink**) 21.06.2022, 20:55

Chile,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        body *,
        body.visible .preloader {
            visibility: hidden;
        }
        body.visible *,
        body .preloader {
            visibility: visible;
        }
    </style>
</head>
<body>
    <div class="preloader"></div>
    <script>
        window.addEventListener('load', () => {
            document.body.classList.add('visible')
        })
    </script>
</body>
</html>

Chile · #5 (**permalink**) 21.06.2022, 21:06

Огромное спасибо!

Nexus · #6 (**permalink**) 22.06.2022, 18:57

Сообщение от Chile

На самом деле, задача проста — сделать так [...], чтобы при обновлении страницы (и переходе по ним), не отображалась вёрстка без стилей

Подключать ресурсы стилей в head страницы не пробовали?
Прелоадеры, особенно настолько примитивные, - зло в чистом виде.
Не дай *ог у вас на странице будет пару картинок неоптимизированных - пользователь, скорее всего, не дождется загрузки страницы и уйдет с сайта.

Форум

Справочник

Discord чат

Курсы javascript