Залежно від типу веб-ресурсу і обсягу інформації на ньому, завантаження сайту може зайняти від декількох мілісекунд до декількох секунд. У процесі завантаження з сайтом може відбуватися безліч речей: верстка може стрибати в різні боки, текст може змінювати накреслення. Виникає цілком закономірне бажання заховати всю цю вакханалію подалі від очей відвідувачів. Для цього і призначені прелоадери.
Прелоадер - це індикатор завантаження сайту. Він може бути виконаний як у вигляді анімованого gif-зображення, так і у вигляді шкали завантаження. Але незалежно від зовнішнього вигляду прелоадера, принцип його роботи буде одним і тим же: як можна раніше показати користувачеві індикатор завантаження, а після закінчення завантаження цей індикатор приховати.
Як завантажується веб-сторінка
Перш ніж створити індикатор якого б то не було процесу, потрібно розібратися в самому процесі. Завантаження веб-сторінок - не виняток. Отже, як же завантажується веб-сторінка?
- Браузер відправляє запит на сервер.
- Сервер починає відправляти браузеру html-код сторінки. Специфіка передачі даних в інтернеті така, що код сторінки браузер отримує не відразу, а частинами.
- З метою економії часу браузер починає обробку html-коду сторінки, не чекаючи закінчення документа.
- Як тільки в коді сторінки браузер зустрічає зовнішній ресурс, він відправляє на сервер запит на отримання цього ресурсу. При цьому, в більшості випадків, якщо цей ресурс - javascript-файл, то подальша обробка сторінки припиняється до повного завантаження і виконання javascript-коду цього файлу.
- Як тільки браузер повністю отримав і опрацював html-код сторінки (обробник досяг закриття тега html), браузер викликає подія DOMContentLoaded, також відоме як DOM Ready.
- Як тільки останній зовнішній ресурс завантажений, браузер викликає подія 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');});
Готово! Тепер замість стрибків у різні боки верстки відвідувач під час завантаження сторінки буде бачити наш акуратний екран завантаження. А працюючу версію такого прелоадера можна побачити на сайті Едуарда Акулова .
Отже, як же завантажується веб-сторінка?