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();
});
jQuery загрузка страницы

Файлы jQuery загрузка страницы:

Скачать Gaya QueryLoader 2
DEMO