Как бы ни выросла скорость интернета, а проблема с загрузкой тяжелый страниц по-прежнему актуальна, причем: чем быстрее у тебя соединение, тем больше тебя раздражают даже небольшие задержки (личный опыт каждого, я думаю). В корне решить эту проблему можно приложив недюжинные усилия по оптимизации сайта, но если проект существует уже несколько лет? Если им занимались уже несколько человек и не найти начала и конца? В данном случае нам на помощь приходят прелоадеры, прячущие медленную загрузку страницы за красивой картинкой.
Большой объем контента и долгая его загрузка, вещи далеко не самые страшные, очень часто необходимо скрыть от ненужных глаз сам процесс загрузки или же отдавать пользователю всю страницу целиком, к примеру, если это анкета с кнопками выбора или что-то подобное. Сталкиваясь с подобным – ставим прелоадер и не мудрствуем лукаво.
Опытный веб-разработчик, конечно, может написать функционал прелоадера для своего сайта за несколько минут, но мы с вами последние лентяи, поэтому пользуемся уже готовеньким набором - fakeLoader. Плюсану этому набору: размер скрипта маленький, написан на 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 – путь до картинки, если вы её будете использовать (седьмой пример в демо).
Вот такое простое решение может улучшить вид загрузки ваших станиц, примеры предлагаю изучить в разделе демо и выбрать то, что вам подходит.