Про сайты со сложной структурой: интернет-магазин, сайт-каталог, блог, сайт-портфолио или личный кабинет любой сложности.
Для связи: @vadimfominov
Post #561
3.12K
Что делать если сайт "прыгает" при обновлении страницы
Для решения можно использовать прелоадер, сделать не сложно. Ниже три простых шага.
1) Cоздай див с классами fv-loader и loading-block.
Скрипт удаляет эту маску после загрузки всех элементов на странице: текст, картинки, файлы стилей и скриптов. Чем быстрее интернет, тем быстрее удалится маска.
К белому фону можно добавить анимацию загрузки на CSS.
Для решения можно использовать прелоадер, сделать не сложно. Ниже три простых шага.
1) Cоздай див с классами fv-loader и loading-block.
<div class="fv-loader loading-block"></div>2) Добавь стили
<style>3) Добавь скрипт
.loading-block:before {
content: '';
width: 100%;
height: 100%;
background: #fff;
position: absolute;
top: 0;
left: 0;
display: block;
z-index: 99999;
}
</style>
<script>Стили добавляют ко всей странице белую маску.
window.addEventListener('load', function () {
let el = document.getElementsByClassName('fv-loader')[0];
el.classList.remove('loading-block');
})
</script>
Скрипт удаляет эту маску после загрузки всех элементов на странице: текст, картинки, файлы стилей и скриптов. Чем быстрее интернет, тем быстрее удалится маска.
К белому фону можно добавить анимацию загрузки на CSS.
- 🔥 23
- 👍 7
- ❤ 2
