Прелоадер сайту своїми руками - popel agency
Залежно від типу веб-ресурсу і обсягу інформації на ньому, завантаження сайту може зайняти від декількох мілісекунд до декількох секунд. У процесі завантаження з сайтом може відбуватися безліч речей: верстка може стрибати в різні боки, текст може змінювати накреслення. Виникає цілком закономірне бажання заховати всю цю вакханалію подалі від очей відвідувачів. Для цього і призначені прелоадери.
Прелоадер - це індикатор завантаження сайту. Він може бути виконаний як у вигляді анімованого gif-зображення, так і у вигляді шкали завантаження. Але незалежно від зовнішнього вигляду прелоадера, принцип його роботи буде одним і тим же: як можна раніше показати користувачеві індикатор завантаження, а після закінчення завантаження цей індикатор приховати.
Як завантажується веб-сторінка
Перш ніж створити індикатор якого б то не було процесу, потрібно розібратися в самому процесі. Завантаження веб-сторінок - не виняток. Отже, як же завантажується веб-сторінка?
Порядок завантаження веб-сторінки наочно
процес створення
Тепер, розуміючи порядок завантаження веб-сторінки, можна сформувати для себе список завдань і умов для нашого прелоадера. Мої умови для нього такі:
Якщо ваша сторінка практично не залежить від графіки, то замість window.onload для приховування прелоадера можна використовувати DOM Ready.
Для вирішення першого завдання помістимо наступний html-код відразу після відкриваючого тега body.
Для нашого прелоадера нам знадобляться стилі, але залежати від зовнішніх файлів ми не хочемо, тому розмістимо стилі прямо в документі, де-небудь всередині head.
На жаль, повністю відмовитися від зовнішніх ресурсів у мене не вийде, адже нам потрібно анімоване gif-зображення. Але, з огляду на невеликий розмір самого зображення, це допустима жертва.
Тепер залишилося тільки приховати наш прелоадер після завантаження сторінки. Тут ми вже не обмежені в засобах, тому можемо використовувати jQuery:
Готово! Тепер замість стрибків у різні боки верстки відвідувач під час завантаження сторінки буде бачити наш акуратний екран завантаження. А працюючу версію такого прелоадера можна побачити на сайті Едуарда Акулова.