Индикатор загрузки страницы

Матаясь по буксам на скрипте Спартака я обнаружил на каждом такой индикатор загрузки страницы, как на скрине. В этой статье я распишу, как сделать подобный себе…Матаясь по буксам на скрипте Спартака я обнаружил на каждом такой индикатор загрузки страницы, как на скрине. В этой статье я распишу, как сделать подобный себе…

Итак, начнёмс… Первым делом распишем Java-скрипт. После тега:

<body>


Добавим:


<script>function spaizGetElementById(id){
if (document.getElementById(id)) {
return document.getElementById(id);
} else if (document.all[id]) {
return document.all[id];
} else if (document.layers & document.layers[id]) {
  return (document.layers[id]);
  } else {
   return false;
  }
}
function toggle_visibility(id, flag)  {
if (spaizGetElementById(id)) {
spaizGetElementById(id).style.visibility = (flag) ? 'visible' : 'hidden';
}
}</script>


Далее добавим код окошка с индикатором:


<div id="wait" style="position:fixed; left:40%; top:50%; visibility:hidden; background-color: #FFBF69; border: 1px solid #FF0000; padding: 5px">
<center><img src="http://wm-sar.ru/img/load3.gif" height="12" align="middle" alt="image" /><br /><b>Идёт передача данных</b><br />Пожалуйста, подождите…</center>
</div>


Остановимся и рассмотрим код окошка:
id=\”wait\” – ID начала и конца окошка.
style=\”…\” – стиль окошка.

Рассмотрим стиль:
position: fixed – окошко зафиксировано и при прокрутке остаётся в центре экрана.
left:40% – отступ слева.
top:50% – отступ сверху.
visiblity:hidden – не показывать (яваскрпит сам открывает и скрывает)
background-color: #FFBF69 – задаём цвет фона окошка.
border: 1px solid #FF0000 – задаём цвет,толщину и тип границ.
padding: 5px – отступ от краёв окошка.
http://wm-sar.ru/img/load3.gif – ссылка на изображение в окошко (анимация загрузки)

Далее идёт понятный всем текст, который также можно отредактировать.

Следом за вставленным кодом запустим яваскрипт:


<script type='text/javascript'>
toggle_visibility('wait', 1);
</script>


Т.е. окошко будет показано. Но нам надо, чтобы при окончании загрузки оно исчезало. Открываем footer.php и перед тегом:


</body>


Добавим скриптик:


<script type='text/javascript'>toggle_visibility('wait', 0);</script>


Он спрячет наш индикатор.

Всё. Комментируем.

Автор публикации

не в сети 9 лет

Alex

Комментарии: 0Публикации: 166Регистрация: 19-02-2011

Понравилась статья? Поделись в соц. сетях:

Похожие новости

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

Авторизация
*
*
Регистрация
*
*
*
Генерация пароля