Прелоадер QueryLoader2

23.01.13 25.01.15 6 8588

Прелоадер 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>

Источник

Смотреть пример

Скачать исходник Размер: 2,74MB | Изменен: 22.01.13 | Загрузок: 356