Gaya QueryLoader 2 - это визуальный эффект при загрузке страницы сайта, когда пользователю кажется, что содержимое подгружается Ajax-запросом без перезагрузки страницы.
Иногда нам хочется украсить свой сайт различными дополнениями, утяжелить его jQuery библиотеками, слайдерами, красивыми полосами прокрутки, поэтому мы предлагаем твоему вниманию удивительный и простой скрипт, который сможет сэмитировать предзагрузку страницы Ajax-запросом.
Его очень легко подключить, он быстро настраивается под твой стиль и ты можешь использовать несколько вариантов отображения самого "загрузчика". Кстати, он также подгружает контент: картинки и прочие элементы "мягко".
Что прежде всего необходимо подключить для того, чтобы данная штука заработала на твоем любимом сайте? И конечно же мы начнем с javascript и css:
<link href='css/style.css' rel='stylesheet' type='text/css' />
<script src="/js/lib/jquery.min.js" type="text/javascript"></script>
<script src="/../jquery.queryloader2.min.js" type="text/javascript"></script>
<script src="/js/script.js" type="text/javascript"></script>
Далее следует указать какой именно DIV id будет использоваться для "Ajax"-подгрузки. И конечно же, нужно разместить новый DIV в твоем шаблоне:
<div id="content">
размещаем его сразу после тега <body> не забываем также, что этот DIV нужно закрыть перед закрывающим тегом
</div>
</body>
Как не странно - все. Теперь тебе осталось настроить вид, если тебе не нравится стандартный. Для этого можешь открыть файл style.css и править в нем стили. Для изменения функций самого QueryLoader'a нужно зайти в файл script.js, а также jquery.queryloader2.js.
Если ты не хочешь перегружать свой сайт, то автор данного скрипта для сайта упаковал его в jquery.queryloader2.min.js
Если ты ориентируешься на iOS устройства, то используй этот код:
window.addEventListener('DOMContentLoaded', function() {
$("body").queryLoader2();
});