Показать Меню
falbar FakeLoader плагин

Прячем загрузку за прелоадер!

FakeLoader плагин

Как бы ни выросла скорость интернета, а проблема с загрузкой тяжелый страниц по-прежнему актуальна, причем: чем быстрее у тебя соединение, тем больше тебя раздражают даже небольшие задержки (личный опыт каждого, я думаю). В корне решить эту проблему можно приложив недюжинные усилия по оптимизации сайта, но если проект существует уже несколько лет? Если им занимались уже несколько человек и не найти начала и конца? В данном случае нам на помощь приходят прелоадеры, прячущие медленную загрузку страницы за красивой картинкой.

Большой объем контента и долгая его загрузка, вещи далеко не самые страшные, очень часто необходимо скрыть от ненужных глаз сам процесс загрузки или же отдавать пользователю всю страницу целиком, к примеру, если это анкета с кнопками выбора или что-то подобное. Сталкиваясь с подобным – ставим прелоадер и не мудрствуем лукаво.

Опытный веб-разработчик, конечно, может написать функционал прелоадера для своего сайта за несколько минут, но мы с Вами последние лентяи, поэтому пользуемся уже готовеньким набором - fakeLoader.js. Плюсану этому набору: размер скрипта маленький, написан на jQuery, легко расширять и дописывать, используется CSS3 – и поэтому никаких gif изображений.

И так начнем, пожалуй, с подключение скриптов:

<link href="fakeLoader.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="fakeLoader.min.js" type="text/javascript"></script>

Теперь добавляем разметку, к которой будем применять плагин:

<div class="fakeloader"></div>

Теперь нам останется вызвать скрипт:

$(".fakeloader").fakeLoader({
	timeToHide: 1200,
	bgColor: "#2ecc71",
	spinner: "spinner1"
});

У этого маленького решения есть также немного своих свойств:

  • timeToHide – время, за которое прелоадер после загрузки страницы исчезнет;
  • zIndex – значение свойства z-index;
  • spinner – вид прелоадера в наличии всего 7 вариантов (spinner1..7), хотим ещё? Ну, так лезем в код и дописываем!;
  • bgColor – цвет фона;
  • imagePath – путь до картинки, если Вы её будете использовать (седьмой пример в демо).

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

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено