Помогите пожалуйста объеденить небольшой скрипт
Добрый вечер, товарищи!
Есть вот такое:
<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 — полный нуб. Помогите, товарищи! |
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>
На самом деле, задача проста — прелоадер, но, чтобы при обновлении страницы (и переходе по ним), не отображалась вёрстка без стилей (прыгают шрифты и прочее непотребство). |
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>
|
Огромное спасибо!
|
Цитата:
Прелоадеры, особенно настолько примитивные, - зло в чистом виде. Не дай *ог у вас на странице будет пару картинок неоптимизированных - пользователь, скорее всего, не дождется загрузки страницы и уйдет с сайта. |
| Часовой пояс GMT +3, время: 04:56. |