«Ждите ответа» — индикатор загрузки

"Ждите ответа" - индикатор загрузки

Часто бывает, что основная или другие страницы веб-сайта содержат информацию, требующую много времени на загрузку: Flash-анимация, Java-апплеты, элементы ActiveX и пр. В этом случае многие веб-мастеры размещают на странице анимированный прогресс-бар (индикатор загрузки) и ссылку, либо пропускающую процесс загрузки, либо ведущую на полностью текстовую версию сайта. Конечно, можно и не помещать индикатор загрузки на страницу, а ограничиться надписью типа «Идет загрузка. Подождите», но согласитесь, что динамичный элемент в виде прогресс-бара делает процесс ожидания не таким скучным и вообще сильно «оживляет» веб-страницу.

Сегодня очень модной стала реализация действия индикатора загрузки посредством технологии Macromedia Flash, однако того же результата можно добиться и с помощью такого клиентского скриптового языка, как JavaScript:

<script language=»JavaScript»>
<!—
vers = 1.0;
// —>
</script>
<script language=»JavaScript1.1″>
<!—
vers = 1.1;
// —>
</script>
<script language=»javascript»>
<!—
function initArray() {
for (var i = 0; i < initArray.arguments.length; i++)
this[i] = initArray.arguments[i];
this.length = initArray.arguments.length;
}
var pics = new initArray(
«status1.jpg»,
«status2.jpg»,
«status3.jpg»,
«status4.jpg»);

var transfer_url = «page.html»;

function transfer(param) {
if (vers>1.0)
location.replace(transfer_url);
else
location.href = transfer_url;
}

function done() {
if (vers < 1.1)
transfer();
else
commence_loading();
}

function commence_loading() {
for (g=0;g<pics.length;g++)
eval(‘document.preload’+g+’.src = «‘+pics[g]+'»;’);
}

if (vers >= 1.1) {
blue = new Image();
blue.src = «blue.gif»;
black = new Image();
black.src = «black.gif»;
}

var loaded = new Object();
for (h=0;h<pics.length;h++)
loaded[h] = 0;
num_loaded = 0;

function update(num) {
loaded[num]++;
if (loaded[num] == 2) {
eval(‘document.status’+num_loaded+’.src = «blue.gif»;’);
num_loaded++;
if (num_loaded == pics.length)
transfer();
}
}
// —>
</script>

В данном случае для индикатора загрузки используются графические изображения blue.gif и black.gif (синие деления на черном фоне), файлом перехода после загрузки назначена страница page.html (var transfer_url = «page.html»;), на которой размещены файлы status1.jpg, status2.jpg, status3.jpg и status4.jpg (var pics = new initArray). Чтобы скрипт инициализировался при загрузке документа с прогресс-баром, в раздел BODY вставляется событие языка JavaScript onLoad=»done()».

Оставьте комментарий

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

Наши контакты

⚑ г. Москва Пресненская наб.
стр.12 (Башня Федерация).


☏ +7(495) 908-63-63
✉️ mail@vebpro.ru
Яндекс.Метрика

Дизайн-студия и агенство интернет рекламы vebpro.ru © 2019 – Все права защищены