Прелоадер - це індикатор завантаження сайту. Він може бути виконаний як у вигляді анімованого gif-зображення, так і у вигляді шкали завантаження. Але незалежно від зовнішнього вигляду прелоадера, принцип його роботи буде одним і тим же: як можна раніше показати користувачеві індикатор завантаження, а після закінчення завантаження цей індикатор приховати.
Як завантажується веб-сторінка?
Перш ніж створити індикатор якого б то не було процесу, потрібно розібратися в самому процесі. Завантаження веб-сторінок - не виняток. Отже, як же завантажується веб-сторінка?
процес створення
Тепер, розуміючи порядок завантаження веб-сторінки, можна сформувати для себе список завдань і умов для нашого прелоадера. Умови для нього такі:
Якщо ваша сторінка практично не залежить від графіки, то замість window.onload для приховування прелоадера можна використовувати DOM Ready.
Для вирішення першого завдання помістимо наступний html-код відразу після відкриваючого тега body:
Для нашого прелоадера нам знадобляться стилі, але залежати від зовнішніх файлів ми не хочемо, тому розмістимо стилі прямо в документі, де-небудь всередині head:
# Page-preloader position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: # 000;
z-index: 100500;
>
# Page-preloader .spinner width: 32px;
height: 32px;
position: absolute;
left: 50%;
top: 50%;
background: url ( '/ images / spinner.gif') no-repeat 50% 50%;
margin: -16px 0 0 -16px;
>
На жаль, повністю відмовитися від зовнішніх ресурсів у мене не вийде, адже нам потрібно анімоване gif-зображення. Але, з огляду на невеликий розмір самого зображення, це допустима жертва.
Тепер залишилося тільки приховати наш прелоадер після завантаження сторінки. Тут ми вже не обмежені в засобах, тому можемо використовувати jQuery:
$ (Window) .on ( 'load', function () var $ preloader = $ ( '# page-preloader'),
$ Spinner = $ preloader.find ( '. Spinner');
$ Spinner.fadeOut ();
$ Preloader.delay (350) .fadeOut ( 'slow');
>);
Є й інший варіант, який Ви могли бачити на нашому порталі. Він безпосередньо задіє тег
і виглядає трохи складніше. Тож почнемо:Крок 1. Перше що нам потрібно зробити, це встановити CSS код
body.royal_loader background: none! important;
visibility: hidden! important;
>
#royal_preloader visibility: visible;
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 9999999999;
-webkit-transition: opacity 0.2s linear 0.8s;
-moz-transition: opacity 0.2s linear 0.8s;
-ms-transition: opacity 0.2s linear 0.8s;
-o-transition: opacity 0.2s linear 0.8s;
transition: opacity 0.2s linear 0.8s;
>
# Royal_preloader.complete opacity: 0;
>
#royal_preloader .background position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #fff! important;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
>
# Royal_preloader.number .percentage color: # 646E7C;
background: transparent;
text-align: center;
margin: -90px 0px 0px -90px;
background-image: url ( '/ loader.gif');
background-size: 120px;
background-repeat: no-repeat;
background-position: 100% 0;
padding-top: 100px;
width: 180px;
position: absolute;
font-size: 25px;
top: 45%;
left: 50%;
-webkit-transition: all 0.3s linear 0.5s;
-moz-transition: all 0.3s linear 0.5s;
-ms-transition: all 0.3s linear 0.5s;
-o-transition: all 0.3s linear 0.5s;
transition: all 0.3s linear 0.5s;
>
Крок 2. Під-вантаження . Відкривати код скрипта сенсу немає, так як він досить вагомий. Можна просто виділити що маємо і розмістити в потрібному Вам місці.
Крок 3. Заключний і найпростіший етап, прикріплення прелоадера до відкриває тегу
таким чином, щоб виглядав він ось так:Готово! Тепер замість стрибків у різні боки верстки відвідувач під час завантаження сторінки буде бачити наш акуратний екран завантаження.