Комментарии
Сегодня мы не будем говорить о том, как ускорить процесс обмена данными сервера и клиента или других технических вещах. Мы поговорим про маленькую, но неотъемлемую деталь практически любого веб-сайта — прелоадер, он же спиннер, значок загрузки страницы. Ахтунг, многабукав.
Прелоадер — философия в круге
Сибирикс
Прелоадер — философия в круге
Сегодня мы поговорим про маленькую, но неотъемлемую деталь практически любого веб-сайта — прелоадер, он же спиннер, значок загрузки страницы. Ахтунг, многабукав.
Главная причина, почему создаются очереди — ограниченная пропускная способность. Будь то пропускная способность тетеньки на кассе, МКАДа или протокола HTTP.
Не ждите, что загрузится картинка!
Ценности века
Собственно, сегодня превыше всего ценятся две «вещи»: айфоны 5S информация и время. Логично, что доступ к первой ценности не должен отнимать много второй. Другими словами: интернет должен работать быстро.
Но пока интернет-провайдеры меряются мегабитами в секунду, «тяжелеет» и контент. И это правильно, но, как понимаете, чревато проблемами со скоростью. Фактором может быть что угодно: от вялого хостера до старого браузера пользователя.

Как дать пользователю счастье, если на загрузку странички нужно время? Подарить ему универсальную игрушку-погремушку — лоадер.
Гражданин, здесь живая очередь!
По большому счету, (пре)лоадером можно назвать любой графический индикатор, показывающий, что процесс выполняется и что пользователю необходимо подождать.
Вероятно, многих смутит то, что термины «прогресс-бар» и «прелоадер» в статье фактически приравнены по смыслу. На самом деле так и есть, и любой прогресс-бар вовсе не сообщает пользователю: «смотри, загрузка завершена на 50%, файл качался 29 секунд, тебе нужно подождать еще 29 секунд и всё будет!». Он просто дает сферический процент, который намекает: «Ну вот, часть операции сделана. Когда-нибудь мы закончим всю. Не знаю, когда. А покажу-ка я тебе вот эти успокаивающие цифры».
Давайте зададимся справедливым вопросом: для чего вообще нужно что-то показывать пользователю? Очевидных задач как минимум две.
Зачем нужны прелоадеры
Первая задача: показать стабильность
Самолеты вполне могли бы делать без иллюминаторов, автобусы — без окон, а экран инсталлятора программы — без полосы прогресса.

Зачем все эти приблуды конечному пользователю? В транспорте он вполне может смотреть кино на планшете, есть рыбу/курицу, читать книгу или видеть сны.

Типичный вид из иллюминатора, вопреки ожиданиям. И так 8 часов.
А пока устанавливается GTA — сходить покурить или ужин приготовить. Давайте так и сделаем?

— Нет? Вам так некомфортно?

У обывателя должна быть пресловутая иллюзия контроля. Вы смотрите в крошечное неудобное самолетное окошко: и вам кажется, что под крылом проплывают знакомые пейзажи с географического атласа, вы видите, когда эта алюминиевая махина набирает высоту и снижается. Сразу становится спокойнее.

То же самое и с лоадером: фактически вы можете не знать, сколько еще минут (часов?) продлится распаковка архива, но вот на экране уже половина этой синей «колбасы», а значит, всё не так уж плохо!
Задача номер два присуща и прогресс-барам и прелоадерам. Она их объединяет. И он куда важнее первой.
Вторая задача: занять и развлечь пользователя
Никто не любит ждать. Если это ожидание нечем скрасить — то вообще хоть стреляйся. Если приходится ждать, пока загрузится сайт (это с моим-то широкополосным скоростными интернетом!) — хочется такой сайт захлопнуть тут же.

Ожидание никто не любит
Поэтому был пущен в ход этот очевидный и бесхитростный прием — создать хоть какую-то движуху на сайте, пока на нем «внешне» ничего не происходит.
О природе прелоадера
Прелоадер на веб-сайтах не несет вообще никакой смысловой нагрузки, кроме как «эй, посмотри на меня, еще посмотри, хоп! твоя страница загрузилась, я сваливаю».
Почему прелоадеры преимущественно круглые? Объяснение очевидное, но оттого не менее занятное:
  • Во-первых, круг — это символ бесконечности. Мы не знаем, через какое время отработает сервер и страничка прилетит в браузер конкретного пользователя — поэтому для подстраховки анимация пускается по кругу.
  • Во-вторых, форма прелоадера — это форма циферблата часов. Каждый с детства знает, что стрелка идет слева направо, поэтому с первобытным интересом следит, когда зажжется следующий кругляш в лоадере.
  • В-третьих, всё круглое и вращающееся — гипнотизирует.
Вспомните, как курсоры в MacOS и Windows предлагают вам расслабиться и подождать.
Всё просто. Главное целевое назначение прелоадера — занять и развлечь скучающего пользователя, смягчить его раздражение.
Примеры интересных прелоадеров
По сути, в том же Google Chrome есть значок прелоадера, находится он на вкладке страницы вверху. Однако веб-технологии позволяют подгружать контент без обновления страницы — в таком случае можно сделать интресный индикатор прямо, скажем, в каталоге.

Если на самом сайте использована куча интересных технологий и для их загрузки нужно время — можно сделать прелоадер на стартовом экране. Да, как во времена бума flash-игр, но только на кошерном HTML5. Пример с нашим vekaslide.ru
Еще несколько ссылок на необычные прелоадеры из бессмертной рубрики «Сайты дня» (#SOTD в нашем твиттере):


И немного ностальгии по веб-технологиям на заре века: