TGViewer
Вадим Фоминов | Создаю сайты на Wordpress Вадим Фоминов | Создаю сайты на Wordpress @wordpress_by · 1.53K subscribers
Post #561 3.12K
Что делать если сайт "прыгает" при обновлении страницы

Для решения можно использовать прелоадер, сделать не сложно. Ниже три простых шага.

1) Cоздай див с классами fv-loader и loading-block.

<div class="fv-loader loading-block"></div>

2) Добавь стили

<style>
.loading-block:before {
content: '';
width: 100%;
height: 100%;
background: #fff;
position: absolute;
top: 0;
left: 0;
display: block;
z-index: 99999;
}
</style>

3) Добавь скрипт

<script>
window.addEventListener('load', function () {
let el = document.getElementsByClassName('fv-loader')[0];
el.classList.remove('loading-block');
})
</script>

Стили добавляют ко всей странице белую маску.
Скрипт удаляет эту маску после загрузки всех элементов на странице: текст, картинки, файлы стилей и скриптов. Чем быстрее интернет, тем быстрее удалится маска.

К белому фону можно добавить анимацию загрузки на CSS.
  • 🔥 23
  • 👍 7
  • ❤ 2
More from @wordpress_by
  1. Aug 3, 2026Как вы занимаетесь оптимизацией картинок для сайта? Лично я делал так: 1) если это .png и…
  2. Jul 30, 2026Есть отличная новость, я сдал на права. Новость отличная, но лично для меня 😁 С апреля по…
  3. Apr 16, 2026А ещё заметил, что курсы по программированию заменили на курсы по вайбкодингу. Наверное зд…
  4. Apr 16, 2026Как поживаете? Последняя запись была аж в конце ноября. Если коротко, то закрывал задачи п…
  5. Nov 22, 2025Пост для тех, кто до сих пор не съехал с nic.ru на beget В копилку к долгому ответу от ТП,…
  6. Nov 20, 2025Временный пост 👇 Ищу дизайнера для создания логотипа. Ниша — приложение для ветеринарных…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →