Онлайн бізнес »Інші уроки» Встановлюємо індикатор завантаження сторінки сайту
Ви, напевно, потрапляли в такі ситуації, коли заходите на який-небудь сайт і не дочекавшись його завантаження залишаєте його. І дійсно, незрозуміло, чи то він порожній, то чи довго завантажується по Внаслідок значного розміру файлу.
Щоб дати відвідувачу зрозуміти, що сторінка все-таки знаходиться в стадії завантаження, а не порожня, треба встановити індикатор завантаження сторінки сайту, який буде виводитися на сторінці до тих пір, поки та повністю не завантажиться.
Якщо Ваш сайт довго завантажується, то є сенс встановити його у себе на сайті. Як це зробити, Ви дізнаєтеся з цього уроку.
І так, Вам знадобиться сам індикатор, роль якого виконуватиме анімаційна картинка в форматі gif і скрипт, керуючий висновком цієї картинки на екран монітора до тих пір, поки повністю не завантажиться сторінка з її вмістом.
Від себе ж викладаю картинку, створену мною в Photoshop. Якщо комусь вона сподобається більше тих, що Ви знайдете на зазначеному сайті, то, будь ласка, зберігайте її у себе на комп'ютері і користуйтеся на здоров'я!
Тепер про сам скрипті. Встановіть на сторінку наступний код:
- Код між тегами HEAD
У стилях значення властивостей підігнані під розміри картинки, яку я виклав на сторінці. Якщо будете використовувати іншу картинку, то потрібно адаптувати її під свої розміри. І не забудьте в тезі img прописати свій шлях до картинки-індикатору (виділено в коді червоним кольором).
В результаті у Вас вийде наступний результат:
Картинку я показав в gif-форматі не анімовану, насправді у Вас індикатор буде в русі (анімований), як на наданої вище зображенні.
Тепер відвідувач не покине Ваш сайт і дочекається його повного завантаження.
Сподобалося - повідом друзям: