Прелоадер сайту своїми руками

1. Як завантажується веб-сторінка
2. процес створення

Залежно від типу веб-ресурсу і обсягу інформації на ньому, завантаження сайту може зайняти від декількох мілісекунд до декількох секунд. У процесі завантаження з сайтом може відбуватися безліч речей: верстка може стрибати в різні боки, текст може змінювати накреслення. Виникає цілком закономірне бажання заховати всю цю вакханалію подалі від очей відвідувачів. Для цього і призначені прелоадери.

Прелоадер - це індикатор завантаження сайту. Він може бути виконаний як у вигляді анімованого gif-зображення, так і у вигляді шкали завантаження. Але незалежно від зовнішнього вигляду прелоадера, принцип його роботи буде одним і тим же: як можна раніше показати користувачеві індикатор завантаження, а після закінчення завантаження цей індикатор приховати.

Як завантажується веб-сторінка

Перш ніж створити індикатор якого б то не було процесу, потрібно розібратися в самому процесі. Завантаження веб-сторінок - не виняток. Отже, як же завантажується веб-сторінка?

1. Браузер відправляє запит на сервер.
2. Сервер починає відправляти браузеру html-код сторінки. Специфіка передачі даних в інтернеті така, що код сторінки браузер отримує не відразу, а частинами.
3. З метою економії часу браузер починає обробку html-коду сторінки, не чекаючи закінчення документа.
4. Як тільки в коді сторінки браузер зустрічає зовнішній ресурс, він відправляє на сервер запит на отримання цього ресурсу. При цьому, в більшості випадків, якщо цей ресурс - javascript-файл, то подальша обробка сторінки припиняється до повного завантаження і виконання javascript-коду цього файлу.
5. Як тільки браузер повністю отримав і опрацював html-код сторінки (обробник досяг закриття тега html), браузер викликає подія DOMContentLoaded, також відоме як DOM Ready.
6. Як тільки останній зовнішній ресурс завантажений, браузер викликає подія window.onload. Сторінка повністю завантажена.

Порядок завантаження веб-сторінки наочно

процес створення

Тепер, розуміючи порядок завантаження веб-сторінки, можна сформувати для себе список завдань і умов для нашого прелоадера. Мої умови для нього такі:

• Повинен відображатися як можна раніше, закриваючи собою весь контент.
• По можливості, відображення не повинно залежати від зовнішніх ресурсів.
• Повинен ховатися, як тільки завантаження сторінки повністю завершена. Щоб приховати можна використовувати будь-яку доступну javascript-бібліотеку.

Якщо ваша сторінка практично не залежить від графіки, то замість window.onload для приховування прелоадера можна використовувати DOM Ready.

Для вирішення першого завдання помістимо наступний html-код відразу після відкриваючого тега body:

<Div id = "page-preloader"> <span class = "spinner"> </ span> </ div>

Для нашого прелоадера нам знадобляться стилі, але залежати від зовнішніх файлів ми не хочемо, тому розмістимо стилі прямо в документі, де-небудь всередині 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');});

Готово! Тепер замість стрибків у різні боки верстки відвідувач під час завантаження сторінки буде бачити наш акуратний екран завантаження. А працюючу версію такого прелоадера можна побачити на сайті Едуарда Акулова .