CSS HTML

Preloader на сайт

Бывает такое, что на сайте очень много картинок, скриптов какие замедляют загрузку сайта. А скорость загрузки сейчас очень важна.
В таком случае нужно искать менее тяжелый аналог скрипта, делать оптимизацию страницы (ее в любом случае лучше делать).
Если аналога нет, или просто нет времени искать или переделывать все, я рекомендую добавить на сайт Preloader.
Запомните, если вам нужен на сайте прелоадер используйте его если страница грузится очень долго.Все это приведет к уходу посетителя с сайта.
Как же сделать Preloader на любом сайте?
Чтобы начать делать на свой сайт, нужно знать что браузер парсит (загружает) html страницу сайта.
Он чтобы экономить время, он загружает контент поетапно, и ждет когда загрузится вся страница, а если подключен js плагин, вообще прекращает ее загружать, пока не выполнить подключаемый скрипт.
Это значит, что остальная часть страницы будет загружена после полной загрузки js скрипта или плагина.
В таком случае, давайте попробуем решить такие проблемы при помощи прелоадера на сайте.

Я попытаюсь кратко рассказать что мы делаем для общего понимания задачи:
Давайте приступим к реализации нашей задачи. Сразу после тега body, нужно разместить следующий div:





<div class="loaderArea">

<div class="loader"></div>



</div>



Если Вы используете на странице сайта библиотеку Jquery, подключите скрипт ниже:

<script>
  $(window).on('load', function () {
    $preloader = $('.loaderArea'),
      $loader = $preloader.find('.loader');
    $loader.fadeOut();
    $preloader.delay(350).fadeOut('slow');
  });
</script>

И разместите его после подключения библиотеки Jquery
Сам LoaderArea – есть фоновая область, которая перекрывает весь основной контент, для оформления прелоадера, возьмем такой CSS для div’a
loaderArea

.loaderArea {
background: linear-gradient(90deg, #FF4E50 10%, #F9D423 90%);
overflow: hidden;
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
z-index: 100000;
}

Loader — это уже есть наша активная область (сам прелоадер). Так как он сделан только при помощи стилей CSS, то у него будут такие стили:

.loader {
height: 40px;
width: 40px;
position: absolute;
left: 50%;
margin-left: -20px;
top: 50%;
margin-top: -20px;
}
.loader:before,
.loader:after {
content: "";
height: 40px;
width: 40px;
border: 8px solid rgba(255,255,255,.5);
border-radius: 10px;
position: absolute;
top: 0;
}

.loader:before {
animation: animate 2s infinite linear;
}

@keyframes animate {
0% {
transform: rotate(0) skew(0);
}

100% {
transform: rotate(180deg) skew(360deg);
}
}

.loader:after {
animation: animate2 2s infinite linear;
}

@keyframes animate2 {
0% {
transform: rotate(0) skew(0);
}

100% {
transform: rotate(-180deg) skew(-360deg);
}
}

Исходник прелоадера был взят с Codepeen и все ссылки на несколько вариантов ниже:

Об авторе

Виталий Мельничук

Адаптивная верстка HTML5+CSS3. Разработка шаблонов под CMS Wordpress, DLE. Делаю работу качественно и в срок.

Оставить комментарий

facebook