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

9 июня 2015 Антон Кулешов 1555 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
Читайте далее

Делаем XML карту для сайта

22 августа 2014 Антон Кулешов

В этой статье мы рассмотрим один из способов как сделать XML карту для сайта. Вариантов реализации данного функционала множество, но тут я опишу способ который, по моему мнению, наиболее универсальный и удобный.

Интегралы больше не проблема

5 января 2016 Антон Кулешов

Математика и все, что связано с ней, не очень популярная тема в рунете. Если за рубежом профессора и преподаватели ещё ведут свои блоги, есть весьма интересные сайты университетов, то у нас все остановилось на банальном распространении курсовых и контрольных. Однако, креативным людям увлекающимся матаном и понимающим в сайтостроении, сегодняшняя статья будет не безынтересна. А затронем мы в ней вывод формул в браузер, на заметку студентам – полноценный сайт, подготовленный к дипломному проекту с парой-тройкой коментов, будет выглядеть на защите просто убийственно, по сравнению с приевшимися презентациями в PowerPoint.

Как определить пользователя, зашедшего с телефона

3 октября 2014 Антон Кулешов

На сегодняшний день у многих высоко посещаемых и популярных сайтов есть мобильная версия. Но как же эти ресурсы определяют: с чего зашел пользователь на сайт? Этот вопрос мы и рассмотрим в статье, а также разберем скрипт, который поможет нам обеспечить необходимый функционал.