Здравствуйте, уважаемые читатели 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.: Если Ваш компьютер вышел из строя, не теряйте время, обратитесь в компьютерную помощь. Подарите шанс на выздоровление своему железному другу!
Источник статьи/урока: https://xozblog.ru