25.01.15 
12351 
Прелоадер картинок, сайта. Два варианта – обычный и с процентом загрузки.
Особенности:
- Предзагрузка всей страницы.
- Предзагрузка части страницы.
- Подгружает все изображения,
<img>теги и фоновые изображения из CSS. - Простая установка.
- Изменяемая полоса загрузки.
- Тестирован в Firefox, Safari, Opera, Chrome, IE7, IE8 и IE6 (хотя скрипт будет проигнорирован в IE6).
Установка:
1. Скачать архив.
2. Загрузить его содержимое на web-сервер.
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. И вы хотите, чтобы только изображения внутри этого элемента были бы предзагружены. Для этого можно использовать следующий код:
<script type='text/javascript'>
QueryLoader.selectorPreload = "#idOfTheElement";
QueryLoader.init();
</script>
Так же имейте ввиду, что предзагружен может быть только один элемент. Поэтому использование селектора class может вызвать определенные проблемы.
Чтобы узнать больше о селекторах в Jquery, обратитесь к соответствующей документации.
Для изменения анимационных эффектов в загрузочной полосе, обратите внимание на следующие функции:
QueryLoader.animateLoader() и QueryLoader.doneLoad()
Изменения в этих функциях потребуют определенного знания Jquery.
Пример использования:
Между <head></head>:
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<br>
<link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
<script type='text/javascript' src='js/queryLoader.js'></script>
Между <body></body>:
<div class='content'>
<h1>QueryLoader with percentage</h1>
<h2>Эти изображения были предзагружены:</h2>
<p id="element">
<img src='images/1.jpg' /><br />
<img src='images/2.jpg' /><br />
<img src='images/3.jpg' /><br />
<img src='images/4.jpg' /><br />
</p>
</div>
<script> QueryLoader.selectorPreload = "body"; QueryLoader.init(); </script>
В исходник включены оба варианта.
Смотреть пример – стандартный вариант
Смотреть пример – вариант с процентом загрузки
Нет комментариев к этой статье.