JavaScript Preloader для приложений на HTML5
PxLoader — это JavaScript библиотека, которая позволяет загружать изображения, звуковые файлы или что-то еще необходимое для вашего приложения, прежде чем запустятся действия на вашем сайте (например, пользовательский интерфейс или начало игры). Вы можете использовать его, чтобы создать прелоадер для игр HTML5 и веб-сайтов, аналогичный ранее используемому во флэш приложениях.
PxLoader позволит вам контролировать состояние загрузки, показывая прогресс завершенной загрузки и позволит выставить приоритеты и порядок загружаемых файлов. С помощью PxLoader можно также разбивать файлы на группы и устанавливать приоритеты этим группам.
PxLoader была создана для игры Cut the Rope и отлично работает с изображениями и звуковыми файлами. Но эта библиотека расширяемая и можно легко добавить другие типы файлов.
И так, ближе к делу…
Пошаговая инструкция
Шаг 1. Скачать файлы скрипта и поместить их в директории вашего сайта, где лежат остальные JavaScript файлы. Ну или если сильно пожелаете, то можете и в другую 🙂
- PxLoader.js — главный файл библиотеки
- PxLoaderImage.js — загрузчик изображений, если вы захотите их загружать
- PxLoaderSound.js — загрузчик звуковых файлов, если вы захотите их загружать*
- Любые другие загрузчики, загрузчики других типов файлов, которые вы напишите. На данный момент доступно только два плагина PxLoaderImage и PxLoaderSound.
* PxLoaderSound работает с SoundManager 2 и перекладывает на нее всю основную работу при загрузке. На самом деле, PxLoader всегда отдает загрузки для загрузчика объектов. Это позволяет библиотеке проигрывать звуки так, как настроено в SoundManager 2, по мере загрузки файлов и использовать для проигрывания тот инструмент, которые заложен в настройках — флэш или HTML5.
Шаг 2. Подключить основной файл библиотеки PxLoaderSound:
<script type="text/javascript" src="js/PxLoader.js"></script>Шаг 3. Добавить плагины для загрузки необходимых Вам форматов ресурсов
<!- images -->
<script type="text/javascript" src="js/PxLoaderImage.js"></script>
<!- sounds -->
<script type="text/javascript" src="js/PxLoaderSound.js"></script>Продолжение следует…
Скачать файлы JavaScript Preloader можно с github
Источник: http://thinkpixellab.com/pxloader/
