Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.06.2022, 20:40
Аватар для Chile
Аспирант
Отправить личное сообщение для Chile Посмотреть профиль Найти все сообщения от Chile
 
Регистрация: 09.02.2016
Сообщений: 35

Помогите пожалуйста объеденить небольшой скрипт
Добрый вечер, товарищи!

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

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,175

Chile,
подожду переводчика ...
Ответить с цитированием
  #3 (permalink)  
Старый 21.06.2022, 20:52
Аватар для Chile
Аспирант
Отправить личное сообщение для Chile Посмотреть профиль Найти все сообщения от Chile
 
Регистрация: 09.02.2016
Сообщений: 35

Сообщение от рони Посмотреть сообщение
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, 21.06.2022 в 20:55.
Ответить с цитированием
  #4 (permalink)  
Старый 21.06.2022, 20:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,175

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>
Ответить с цитированием
  #5 (permalink)  
Старый 21.06.2022, 21:06
Аватар для Chile
Аспирант
Отправить личное сообщение для Chile Посмотреть профиль Найти все сообщения от Chile
 
Регистрация: 09.02.2016
Сообщений: 35

Огромное спасибо!
Ответить с цитированием
  #6 (permalink)  
Старый 22.06.2022, 18:57
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,554

Сообщение от Chile
На самом деле, задача проста — сделать так [...], чтобы при обновлении страницы (и переходе по ним), не отображалась вёрстка без стилей
Подключать ресурсы стилей в head страницы не пробовали?
Прелоадеры, особенно настолько примитивные, - зло в чистом виде.
Не дай *ог у вас на странице будет пару картинок неоптимизированных - пользователь, скорее всего, не дождется загрузки страницы и уйдет с сайта.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Какой нужен скрипт, чтобы переключение серии работало? Помогите пожалуйста! Andreiom Events/DOM/Window 1 27.08.2015 07:30
select - тег помогите доработать скрипт пожалуйста Svetik-top Элементы интерфейса 3 25.03.2015 17:12
проверка input (пожалуйста, помогите) alma95 Общие вопросы Javascript 13 17.02.2015 13:26
Помогите вставить скрипт в скрипт smc jQuery 0 13.12.2014 21:24
Помогите, пожалуйста zashibis Общие вопросы Javascript 1 02.12.2008 13:07