Прогресс

Прогресс.

Приложения, включающие в себя изображения, несколько файлов с кодом, информацию для баз данных, видео и любые другие объемные файлы, обычно загружаются довольно долго. Для того чтобы отслеживать этот процесс, API предоставляет уже известное вам событие progress. Это такое же событие, как мы уже использовали раньше при знакомстве с другими API.

Событие progress срабатывает только в процессе загрузки файлов. В следующем примере мы используем событие noupdate совместно с описанными ранее событиями cached и updateready, для того чтобы сообщить пользователю, что процесс загрузки завершился.

Листинг 16.9. Прогресс загрузки

Function initiate(){

Databox=document. getElementById(‘databox’);

Databox. innerHTML=’<progress value="0" max="100">0%</progress>’; cache=window. applicationCache;

Cache. addEventListener(‘progress’, progress, false);

Cache. addEventListener(‘cached’, show, false); cache. addEventListener(‘updateready’, show, false); cache. addEventListener(‘noupdate’, show, false);

}

Function progress(e){ if(e. lengthComputable){

Var per=parseInt(e. loaded/e. total*100);

Var progressbar=databox. querySelector("progress");

Progressbar. value=per;

Progressbar. innerHTML=per+’%';

}

}

Function show(){

Databox. innerHTML=’r0T0B0′;

}

Window. addEventListener(‘load’, initiate, false);

Как всегда, событие progress срабатывает периодически, информируя нас о состоянии процесса. В коде из листинга 16.9 при каждом срабатывании события progress происходит вызов функции progress() и информация на экране в элементе <progress> обновляется.

Процесс может завершаться по-разному. Возможно, приложение кэшировалось впервые, и тогда сработает событие cached. Если кэш уже существовал и мы загрузили обновление, то по завершении загрузки файлов сработает событие updateready. Третья возможность такова, что кэш уже использовался и обновлений не было, поэтому все завершилось событием noupdate. Мы прослушиваем события для всех перечисленных ситуаций и во всех случаях вызываем функцию show(), которая выводит на экран сообщение «Готово», извещая пользователя о завершении процесса. Подробнее о функции progress() рассказывается в главе 13.

Используйте файлы HTML и CSS из предыдущих примеров. Скопируйте код из листинга 16.8 в файл cache. js. Загрузите приложение на свой сервер и откройте в браузере главный документ. Для того чтобы увидеть работающий индикатор прогресса, в манифесте необходимо описать объемный файл (сейчас браузеры накладывают определенные ограничения на размер кэша; рекомендуем тестировать пример с файлами объемом несколько мегабайт, но не больше 5 Мбайт). Например, если вы используете видео trailer. ogg, с которым мы работали в главе 5, то файл манифеста будет выглядеть так:

CACHE MANIFEST

Cache. html

Cache. css

Cache. js

Trailer. ogg

# date 2011/06/27

Для добавления в документ нового элемента <progress> мы использовали innerHTML. Это нельзя назвать рекомендуемой практикой, однако в нашем маленьком примере так сделать можно. Чаще всего элементы добавляются в DOM с помощью метода JavaScript createElement() совместно с appendChild().

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *