Бывают такие ситуации, когда из-за использования большого количества плагинов или из-за большого подключения .сss или .js сайт загружается долго. Конечно надо оптимизировать его. Избавляться от плагинов, уменьшать код и т.д. Но бывают ситуации, когда ты просто не можешь отказаться от них. Я советую в таком случае реализовать на своем сайте прелоадер. Это может сделать более красивую загрузку сайта и уменьшит показатель отказов на вашем сайте.
Как сделать прелоадер
Прежде чем сделать прелоадер на своем сайте, вы должны понимать некоторые вещи:
- для того, чтобы сэкономить время, браузер загружает код поэтапно
- если у вас подключен javaScript, то сначала загружается js, а потом дальше контент. Поэтому рекомендуют скрипты подключать в самом конце.
Что нам нужно сделать
- Внедрить html код прелоадера
- Скрыть данным прелоадером все содержимое сайта пока он полностью не загрузится
- Скрыть прелоадер и показать загруженный сайт
Внедрение
Для начала нам нужно сразу после открывающего тега <body> разместить следующий код:
|
1 2 3 |
<div class="preloader"> <div class="prePreloader"></div> </div> |
div c классом preloader будет перекрывать основной контент, пока не загрузится весь сайт. Для него мы прописываем такие CSS-стили:
|
1 2 3 4 5 6 7 8 9 10 |
.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-стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.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:
|
1 |
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
Код для прелоадера:
|
1 2 3 4 5 6 7 8 |
<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 есть ошибка и код не выполняется