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

9 июня 2015 Антон Кулешов 1550 0

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

Реклама

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

Опытный веб-разработчик, конечно, может написать функционал прелоадера для своего сайта за несколько минут, но мы с вами последние лентяи, поэтому пользуемся уже готовеньким набором - 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 – путь до картинки, если вы её будете использовать (седьмой пример в демо).

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Слайдер карусель

7 октября 2015 Антон Кулешов

Желание выделиться и огромная конкуренция вынуждает веб-мастеров делать сайты интересными и запоминающимися. Трудно представить, сколько времени, зачастую, тратится на то, чтобы придать странице особый шарм. И сегодня я хочу рассказать про jQuery плагин Cloud 9 Carousel – это скрипт, которой позволяет сделать 3D слайдер карусель.

Waves - волна под курсором

21 мая 2015 Антон Кулешов

Эффекты при клике не столь популярны как hover effects, однако, сегодня мой взор упал на плагин под названием waves.

Множество WordPress «велосипедов» в одном плагине Bicycles by falbar

5 июля 2016 Антон Кулешов

В большинстве случаев настройка и оптимизация сайта на движке WordPress состоит из набора всем известных «велосипедов» и шаблонов добавляемого кода, которые повторяются из проекта в проект. На данный момент у меня есть несколько сайтов на WordPress, поэтому я уже давно решил перенести, так называемую, «тонкую настройку» в плагин, о котором сегодня и пойдёт речь.