верстка, дизайн, програмування під веб, юзабіліті

Доволі часто працюючи зі скриптами, що використовують AJAX-підхід, доводиться показувати користувачу, що щось під час виконання скрипта таки на сторінці відбувається.  Адже самостійно про це здогадатись не випадає. Це звичайно найзручніше реалізувати за допомогою анімаційної картинки (як правило в GIF-форматі). У мене назбиралась невеличка колекція таких динамічних зображень, якою хочу поділитися з вами.

Рис.1. Деякі найменші (за розміром) анімаційні gif’и з колекції.

Рис.2. Більші (за розміром) анімаційні gif’и з колекції.

Рис.3. Loading bar’и з моєї колекції картинок.

Кому цікаво, може завантажити собі збірку звідси

(кількість картинок: 44, розмір: 200 КБ, формат: zip-архів).

Але цим, як ви уже зрозуміли, пост не закінчується. Не факт, що котрась з картинок підійде вам до смаку чи під дизайн сайту. Отож, хочу порекомендувати два корисних сайти до теми:

• http://www.ajaxload.info/ — Ajax loading gif generator. На сайті ви можете підібрати собі анімаційну картинку для зображення процесу завантаження, вказавши вид малюнку (37 різновидів), колір заднього фону (включаючи прозорий фон — transparent background) та колір самого малюнку.

• http://www.webscriptlab.com/ — ресурс аналогічний до ajaxload.info, щоправда, тут також можна задати швидкість (slow, normal, fast) анімації.

І на завершення трохи інформації для допитливих

При реалізації індикатора завантаження даних у вигляді анімаційної картинки можна застосувати так зване передзавантаження  зображення (від англ. «pre-loading image»).

Воно полягає в тому, що картинку завантажують з сервера перед показом користувачеві, але так, щоб він її завчасно не бачив. Це дозволяє показати картинку  в той же момент, а не очікувати поки вона буде передана через Інтернет. Погодьтесь, що не логічно чекати появи індикатора процесу довше, ніж виконання самого скрипта.

Звичайно при достатньо швидкому Інтернеті цього не помітно, але ж не всі мають швидкісний доступ до Інтернету. Тому, гадаю, вам буде корисно прочитати одну зі статей про «pre-loading» зображень:

• «Два хороших способа предзагрузки графики» (російською мовою).
• «Pre-Loading Images» (англійською мовою).
• «Введение в JavaScript для Мага» (Часть 8: Объект Image. Упреждающая загрузка изображения) — старенька, проте вельми практична і зручна книжка  по мові JavaScript для початківців від Стефана Коха (Stefan Koch). Книжку при бажанні можна легко знайти в Інтернеті на російській мові.

Популярність: 30%