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

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

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

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

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

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

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

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

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

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

<!-- Прелоадер -->
  <div id="before-load">
    <i></i>
  </div>
<!-- /Прелоадер -->

<i></i>

</div>

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

<style>
		/* Прелоадер */
		#before-load {
		  position: fixed;
		  left: 0;
		  top: 0;
		  right: 0;
		  bottom: 0;
		  background: #fff;
		  z-index: 9999; 
		}
		#before-load i {
			width: 70px;
			height: 70px;
			position: absolute;
			left: 50%;
			top: 50%;
			background: url('preloader.gif') no-repeat 50% 50%;
			margin: -35px 0 0 -35px;
		}
</style>

<style>

/* Прелоадер */

#before-load {

position: fixed;

left: 0;

top: 0;

right: 0;

bottom: 0;

background: #fff;

z-index: 9999;

}

#before-load i {

width: 70px;

height: 70px;

position: absolute;

left: 50%;

top: 50%;

background: url('preloader.gif') no-repeat 50% 50%;

margin: -35px 0 0 -35px;

}

</style>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
	// Прелоадер
	$(window).load(function() {
		$('#before-load').find('i').fadeOut().end().delay(400).fadeOut('slow');
	});
</script>

// Прелоадер

$(window).load(function() {

$('#before-load').find('i').fadeOut().end().delay(400).fadeOut('slow');

});

</script>

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

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

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
  setTimeout(function() { $('#before-load').find('i').fadeOut().end().delay(400).fadeOut('slow'); }, 1000);
  // Прелоадер
  $(window).load(function() {
    $('#before-load').find('i').fadeOut().end().delay(400).fadeOut('slow');
  });
</script>

setTimeout(function() { $('#before-load').find('i').fadeOut().end().delay(400).fadeOut('slow'); }, 1000);

// Прелоадер

$(window).load(function() {

$('#before-load').find('i').fadeOut().end().delay(400).fadeOut('slow');

});

</script>

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

Леха.com

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

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

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