js Прелоадер QueryLoader 

Дата публикации  Дата изменения25.01.15  КомментарииНет   Просмотры6756

Прелоадер картинок, сайта. Два варианта – обычный и с процентом загрузки.

Особенности:

  • Предзагрузка всей страницы.
  • Предзагрузка части страницы.
  • Подгружает все изображения, <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>

В исходник включены оба варианта.

 Источник 

 Смотреть пример – стандартный вариант

 Смотреть пример – вариант с процентом загрузки

  Размер:  1,01MB | Изменен: 22.01.13 | Загрузок: 524
Бесплатные курсы

Категории

Теги: ,

Оцените материал:

Рейтинг: 10.0/10 (5)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые