Предзагрузка страниц на jQuery

Здравствуйте, уважаемые читатели XoZbloga! Для одного из моих проектов понадобился предзагрузчик страниц, в этой коротенькой статье хочу поделиться с Вами этим скриптом (работает на jQuery).

Пока искал, перепробовал довольно много похожих скриптов, большинством остался недоволен. Одни не работают в каком-либо браузере (чаще всего IE), другие конфликтуют с моим кодом javascript и тд. Остановился на QueryLoader2. Он производит предварительное загрузку изображений, фоновых изображений, а уже после показывает готовую страницу. Это версия доработана специально для тех, кто пользуется jQuery, дабы минимизировать конфликты. Проверял во всех браузерах (последних версий) и даже в Internet Explorer 7, 8, 9 — работает.

Как пользоваться?

Все очень просто. Главное подключить библиотеку jQuery и непосредственно сам скрипт, который находится в файле jquery.queryloader2.js

1
2
3
4
<!-- Подключаем библиотеку jquery -->
<script  type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<!-- Подключаем скрипт -->
<script src="jquery.queryloader2.js" type="text/javascript"></script>

А уже после вызывать QueryLoader следующим образом:

1
2
3
$(document).ready(function () {
    $("body").queryLoader2();
});

Чтобы заставить его работать на iOS устройствах, используйте этот код:

1
2
3
window.addEventListener('DOMContentLoaded', function() {
    $("body").queryLoader2();
});

Опции

Вы также можете использовать следующие опции, чтобы настроить предзагрузчик страниц.
BackgroundColor
(строковое значение) цвет основного фона загрузчика (в шестнадцатеричном виде к примеру #FAFAFA).

barColor
(строковое значение) цвет фона полоски загрузки (в шестнадцатеричном виде).

barHeight
(числовое значение) Высота полоски загрузки в пикселях. По умолчанию: 1

deepSearch
(булево) найти все изображения в выбранном элементе. По умолчанию: true.

percentage
(булево) установить загрузку в процентах. По умолчанию: false.

completeAnimation
(строковое значение) установить тип анимации в конце. Варианты: «grow» и «fade». По умолчанию: grow.

minimumTime
(числовое значение) время в миллисекундах выделенное на процесс загрузки. Даже если страница уже загружена, пока время не истечет нам ее не покажут 🙂

В примере на демонстрационной странице загрузчик используется вот таким образом:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function () {
    $("body").queryLoader2({
        barColor: "#6e6d73",
        backgroundColor: "#fff1b0",
        percentage: true,
        barHeight: 1,
        completeAnimation: "grow",
        minimumTime: 100
    });
});

На этом все! Если возникнут вопросы или предложения пишем комментарии! До связи )

P.S.: Если Ваш компьютер вышел из строя, не теряйте время, обратитесь в компьютерную помощь. Подарите шанс на выздоровление своему железному другу!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!