25.01.15 
8586 
Прелоадер QueryLoader2 – версия 2 качественного прелоадера QueryLoader. Следует отметить, что предыдущая версия представляется более гибкой в возможности представления различного контента.
QueryLoader2 сканирует переданные элементы на наличие картинок и фоновых изображений и предзагружает их до полного открытия сайта.
Версия модифицирована с целью облегчения подключения пользователями (особенно теми, у кого Jquery уже подключен).
Теперь QueryLoader работает с jQuery v1.7.1 и в IE version > 7, Chrome, Safari and Firefox.
Использование:
Вставьте скрипт между <head></head> старницы:
<script src="path/to/file/jquery.queryloader2.js" type="text/javascript"></script>
Убедитесь, что прописали его после подключения Jquery.
Теперь вызовите QueryLoader в $(document).ready() примерно так:
$(document).ready(function () {
$("body").queryLoader2();
});
Чтобы работало в iOS системах, используйте этот код:
window.addEventListener('DOMContentLoaded', function() {
$("body").queryLoader2();
});
Готово.
Настройки:
backgroundColor
(string) фоновый цвет загрузчика (в hex).
barColor
(string) фоновый цвет полосы (в hex).barHeight
(int) высота полосы загрузки в пикселях. По умолчанию: 1
deepSearch
(boolean) установите в true чтобы найти все изображения в выбранных элементах.
Если не желаете, чтобы были обработаны подпапки, установите в false. По умолчанию: true.
percentage
(boolean) Установите в true для показа процента загрузки. По умолчанию: false.
completeAnimation
(string) Установите тип анимации в конце. Возможно: “grow” или “fade”. По умолчанию fade.
onLoadComplete
(function) Эта функция вызывавется один раз при завершении загрузки. Это удобно, когда меняете анимацию в конце.
onComplete
(function) Функция вызывается один раз при завершении загрузки и анимации.
Пример использования:
Между <head></head>:
<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.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</head>
Между <body></body>:
<div id="content">
<h1>QueryLoader v2 demo page</h1>
<p>
This was a simple demo of what QueryLoader2 does: Giving a simple loading overlay
before showing the webpage.
</p>
<ul>
<li>
<img src="images/Dali_Swans_Reflecting_Elephants.jpg" />
</li>
<li>
<img src="images/hokusai_1680_1050.jpg" />
</li>
<li>
<img src="images/johnbaizley_Tat.jpg" />
</li>
<li class="gradient">
Gradient test
</li>
<li>
Non existant
<img src="images/404nonexistant.jpg" />
</li>
</ul>
</div>
Talory#
Доходит до 98% и зависает. (Делал на шаблоне от dle 10.3).
coder.hol.es /* Админ */#
Видимо, особенности DLE. Стоит посмотреть, какая версия jQuery используется.
До#
Здравствуйте! Классный прелодер! Но у меня возникла такая проблема: до прелодера мелькает на секунду сама страница. Как это можно исправить?
coder hol es#
Здравствуйте! Посмотрите подключение jquery – возможно, у вас подкачивается с внешнего ресурса не достаточно быстро (или подключен в футере). Также посмотрите оптимальность расположения остальных элементов скрипта.
Александр#
Доброго времени суток. Большое спасибо за статью. У меня не большая проблема, может сможете помочь, не срабатывает completeAnimation: "grow". Просто исчезает после скролинга а не раздвигается. По всякому уже пробовал. Спасибо.