Перед загрузкой изображений на сайт всегда возникает заминка, что смотрится не очень то красиво, никто еще пока не нашел универсального решения, позволяющего избавиться от этой проблемы. Есть множество прелоадеров, призывающих пользователей дождаться окончания загрузки, но по большей части они всего лишь выводят надпись, типа «Идет загрузка страницы» или же отображают анимацию в виде вращающегося колесика или круговой диаграммы. А почему бы не создать что-нибудь более оригинальное?
Возможности:
• Предзагрузка целой веб-страницы
• Предзагрузка части страницы сайта
• Включает все изображения, теги <img> и background-image свойство CSS
• Легко реализуется
• Настраиваемый загрузочный бар
• Работает в браузерах: Firefox, Safari, Opera, Chrome, IE7, IE8 and IE6 (хотя в IE6 скрипт будет проигнорирован).
Реализация:
Чтобы установить себе данный сценарий, вам вовсе не надо иметь большой опыт работы с JavaScript. Просто следуйте моим наставлениям:
1) Скачайте сжатый архив
2) Загрузите свой контент на сайт
3) Вставьте следующий код на страницу своего сайта
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
<script type='text/javascript' src='js/queryLoader.js'></script>
Удалите часть, относящуюся к jQuery, если вы уже подключили его.
4) Вставьте следующий код внизу страницы
<script type='text/javascript'>
QueryLoader.init();
</script>
Вот и все!!!
Настройка:
Если вам нужна предзагрузка только к одному элементу или контейнеру, установите jQuery селектор для этого объекта.
Допустим у вас есть некий элемент с id и именно для него вы хотите установить preloader, тогда вам понадобится следующий код:
<script type='text/javascript'>
QueryLoader.selectorPreload = "#idOfTheElement";
QueryLoader.init();
</script>
И обязательно убедитесь, что предзагрузка срабатывает только у одного элемента страницы.
Чтобы перенастроить анимацию предзагрузочного бара, поколдуйте над следующими функциями:
QueryLoader.animateLoader() and QueryLoader.doneLoad()
Тут вам конечно же потребуется знание jQuery, но при желании можно со всем справиться:)