Прелоадер для сайта

preloader

Сейчас модная тенденция на сайт добавлять прелоадер. Мое мнение — его стоит добавлять очень аккуратно, есть подводные камни.

Что делает прелоадер, зачем он нужен?

  1. Бывает сайт медленно загружается в силу того, что присутствует много графики, картинок и прочего контента. И чтобы посетитель не видел как постепенно прорисовывается сайт — добавляют прелоадер. Таким образом когда сайт полностью загрузится — то после этого, прелоадер пропадает и пользователь видит красивый сайт.
  2. Чтобы искусственно завысить свою значимость в глазах пользователя. Ну тип, смотрите у нас на сайте какие модные крутилки, все по взрослому.

Стоит отметить, что большинство популярных и при этом тяжелых сайтов не используют прелоадеры (например, ebay и amazon). Лучше использовать более грамотную верстку и не блокировать отображение сайта.

Ну да ладно, периодически его приходится ставить на сайтах. Например, посетители с мобильных устройств могут долго ждать, когда прорисуется сайт. А тут прелоадер будет крутиться и возможно заставит посетителя дождаться загрузки сайта.

Я в свое время где то нашел этот код, может выдрал из какого платного шаблона. Вообще, код очень прост, его я использовал для имиджевого сайта Русской Механики.

Прелоадер для сайта состоит из 4 частей:

  1. HTML-код прелоадера
  2. CSS стили оформления (которые отображают прелоадер поверх сайта и заслоняют им все содержимое)
  3. Java Script для его скрытия
  4. Картинка GIF (анимация прелоадера)

HTML-код прелоадера вставляется сразу после тега <body>.

CSS-стиль оформления прелоадера можно вставить в секцию <head> или в файл стиля (я обычно его вставляю в самый верх, чтобы он в первую очередь загрузился, хотя не уверен, что раположение в файле стиля имеет значение).

Java Script для скрытия прелоадера надо разместить после вызова библиотеки JQuery. У меня он размещен перед закрывающимся тегом </body>.

Фактически этот код просто после полной загрузки страницы сайта (вместе со всеми внешними скриптами и т.п.) включает плавную анимацию «затухания» прелоадера. Вот и вся магия.

Обратите внимание, используется JQuery анимация «затухания», поэтому нужна эта библиотека. Но т.к. JQuery сейчас везде используется, я не переживаю по этому поводу.

Ну и остается выбрать картинку прелоадера и положить его в нужное место (в стилях посмотрите, откуда он берется и там заодно можете его имя и адрес задать background: url('preloader.gif') no-repeat 50% 50%; ). Я не помню откуда этот взял, но скачать прелоадеры можно, например отсюда: http://preloaders.net, только проверьте внимательно какого он размера и этот размер укажите в стилях ( width: 70px; height: 70px; ).

Должно все заработать. Для полного понимания можно скачать рабочий пример прелоадера для сайта.

С прелоадерами все красиво и прикольно, пока не начинается затуп какого-нибудь скрипта, который берется с другого сайта/сервера. Тогда прелоадер может зависнуть на очень продолжительный срок. Посетитель, ясное дело, решит что ваш сайт говно нерабочее и свалит к конкуренту за нужным контентом. Например, я сталкивался с такими затупами по вине виджета группы вконтакте, рекламы гугл адсенса и адривера. В общем, все это нифига не надежно, если сайт что-то подгружает со сторонних серверов.

А учитывая, что сам Гугл где-то писал, что задержка загрузки сайта свыше 5 секунд приводит к катастрофическому количеству отказов, что очень плохо повлияет на поведенческий фактор. Да и вообще каждая дополнительная секунда ожидания уменьшает лояльность пользователя. Поэтому там где такие затупы прелоадера вполне реальны я использую код JS с фиксом.

Т.е. если страница не успела за секунду загрузиться, то все равно прелоадер убрать (На самом деле получается около 2 сек., т.к. пока код загрузится, потом он только отработает отчет секунды, а потом еще анимация затухания около полусекунды).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *