Бывают такие ситуации, когда из-за использования большого количества плагинов или из-за большого подключения .сss или .js сайт загружается долго. Конечно надо оптимизировать его. Избавляться от плагинов, уменьшать код и т.д. Но бывают ситуации, когда ты просто не можешь отказаться от них. Я советую в таком случае реализовать на своем сайте прелоадер. Это может сделать более красивую загрузку сайта и уменьшит показатель отказов на вашем сайте.
Как сделать прелоадер
Прежде чем сделать прелоадер на своем сайте, вы должны понимать некоторые вещи:
- для того, чтобы сэкономить время, браузер загружает код поэтапно
- если у вас подключен javaScript, то сначала загружается js, а потом дальше контент. Поэтому рекомендуют скрипты подключать в самом конце.
Что нам нужно сделать
- Внедрить html код прелоадера
- Скрыть данным прелоадером все содержимое сайта пока он полностью не загрузится
- Скрыть прелоадер и показать загруженный сайт
Внедрение
Для начала нам нужно сразу после открывающего тега <body> разместить следующий код:
<div class="preloader"> <div class="prePreloader"></div> </div>
div c классом preloader будет перекрывать основной контент, пока не загрузится весь сайт. Для него мы прописываем такие CSS-стили:
.preloader {
background: linear-gradient(90deg, #FF4E50 10%, #F9D423 90%);
overflow: hidden;
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
z-index: 100000;
}
div c классом prePreloader это сам прелоадер. У меня для него такие CSS-стили:
.prePreloader{
height: 40px;
width: 40px;
position: absolute;
left: 50%;
margin-left: -20px;
top: 50%;
margin-top: -20px;
}
.prePreloader:before,
.prePreloader:after {
content: "";
height: 40px;
width: 40px;
border: 8px solid rgba(255,255,255,.5);
border-radius: 10px;
position: absolute;
top: 0;
}
.prePreloader:before {
animation: animate 2s infinite linear;
}
@keyframes animate {
0% {
transform: rotate(0) skew(0);
}
100% {
transform: rotate(180deg) skew(360deg);
}
}
.prePreloader:after {
animation: animate2 2s infinite linear;
}
@keyframes animate2 {
0% {
transform: rotate(0) skew(0);
}
100% {
transform: rotate(-180deg) skew(-360deg);
}
}
Теперь нам нужно подключить jQuery, если он у вас еще не подключен, и потом вставить код, который ниже.
Скрипт подключения jQuery:
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Код для прелоадера:
<script>
$(window).on('load', function () {
$preloader = $('.preloader'),
$loader = $preloader.find('.prePreloader');
$loader.fadeOut();
$preloader.delay(350).fadeOut('slow');
});
</script>
Разместить его нужно обязательно после подключения jQuery
Если вы хотите изменить прелоадер, можете воспользоваться ссылками, которые я оставлю ниже, чтобы создать свой, на базе того, который выше.
icons8.com — готовые варианты на чистом CSS и HTML
Preloaders.net — СНГ генератор прелоадеров. Можно выбрать самому вариант и задать ему скорость анимации и цвет.
Если у вас есть вопросы, или нужна помощь, пишите в комментарии, обязательно помогу 🙂
Также подпишитесь на наш наш telegram-канал и соц.сети, чтобы не пропустить новые статьи и новости 😉
Спасибо огромное!!!
Только этот прелоадер вписался в мой код! Несколько дней поисков прошли не зря!
Очень рад что смог вам помочь 😉
А как сделать, чтобы по истечению прелоадера загрузилась сама страница сайта?
у него уже стоит что бы он после загрузки страницы исчезал
Здравствуйте, если не трудно. Подскажите пожалуйста как квадратик заменить слово,например booblik
ну так просто не получиться, написать слово и заработало. Необходимо будет переписать html структуру и отредактировать css конекретно для слова. Ну и вообще, надо подумать как это слово должно анимироваться при появлении прелоадера
У меня загрузка выходит но сайт не открывает
наверно где-то в js есть ошибка и код не выполняется