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

Итак, начнёмс... Первым делом распишем 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>

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

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


Рубрика: Бесплатное » Дополнения   |   Автор: Alex   |   Просмотры: 9438
Комментариев: 338
Публикаций: 169
ICQ: 650073308
- 291 +
  Автор: Alex   |   Группа: Пользователи   |   Дата: 10 марта 2011  
Не забываем,что в МФС файлы header.php и footer.php называются head.php и foot.php соответственно и находятся в папке blocks!
Комментариев: 738
Публикаций: 50
ICQ: --
- 4 +
  Автор: Green-wm   |   Группа: Пользователи   |   Дата: 10 марта 2011  
Тоже со спартаковского скрипта вытащил?))

Ааа, вот вижу) Решил спартаковские штучки по-вытаскивать с его скриптов ?)
Комментариев: 42
Публикаций: 1
ICQ: --
- 46 +
  Автор: anim1900   |   Группа: Пользователи   |   Дата: 10 марта 2011  
это без перезагрузки страницы?
Комментариев: 738
Публикаций: 50
ICQ: --
- 4 +
  Автор: Green-wm   |   Группа: Пользователи   |   Дата: 10 марта 2011  
Цитата: anim1900
это без перезагрузки страницы?

С перезагрузкой! Просто будет индекатор...
Комментариев: 42
Публикаций: 1
ICQ: --
- 46 +
  Автор: anim1900   |   Группа: Пользователи   |   Дата: 10 марта 2011  
XaKeR Че ты не отвечаеш то на кипер???????????????????????????????7
Комментариев: 738
Публикаций: 50
ICQ: --
- 4 +
  Автор: Green-wm   |   Группа: Пользователи   |   Дата: 10 марта 2011  
Цитата: anim1900
XaKeR Че ты не отвечаеш то на кипер???????????????????????????????7

о_0 как я могу отвечать если он у меня выключен? belay
Комментариев: 42
Публикаций: 1
ICQ: --
- 46 +
  Автор: anim1900   |   Группа: Пользователи   |   Дата: 10 марта 2011  
да ладно тебе не ври а!!!!!!!!!!!!!!!11 онлайн занчет онлайн! если выключен он был бо пасивным я тебе что вру а ? нафига мне это не ври у тебя онлайн и ты не отвечаешь если выключен былобы я узнал это в первую очередь!!! И сообщение отпралять в кипере если у тебя выключено не возможно а я тебе отправил пордка 10 -15 штук!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Комментариев: 738
Публикаций: 50
ICQ: --
- 4 +
  Автор: Green-wm   |   Группа: Пользователи   |   Дата: 10 марта 2011  
Цитата: anim1900
да ладно тебе не ври а!!!!!!!!!!!!!!!11 онлайн занчет онлайн! если выключен он был бо пасивным я тебе что вру а ? нафига мне это не ври у тебя онлайн и ты не отвечаешь если выключен былобы я узнал это в первую очередь!!! И сообщение отпралять в кипере если у тебя выключено не возможно а я тебе отправил пордка 10 -15 штук!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Чувак, у меня кипер серьёзно выключен о_0, смысл мне врать?, могу даже скрин сделать :-)
Комментариев: 338
Публикаций: 169
ICQ: 650073308
- 291 +
  Автор: Alex   |   Группа: Пользователи   |   Дата: 11 марта 2011  
а такая проблема и у меня есть,статус показывает неправильно...и старый кипер в списке корреспондентов всегда онлайн у меня,хотя ключ от него я потерял ещё до открытия шопа)
Комментариев: 22
Публикаций: 2
ICQ: 427422
- 17 +
  Автор: wapids   |   Группа: V.I.P.   |   Дата: 11 марта 2011  
Спасибо пригодилось
Комментариев: 99
Публикаций: 0
ICQ: --
- 77 +
  Автор: tagan   |   Группа: V.I.P.   |   Дата: 15 марта 2011  
Прикольно, но почемуто я его увидел всего раз сразу после того как поставил... Может страницы быстро прогружаються что он не вылазит???
Комментариев: 134
Публикаций: 0
ICQ: 428155128
- 171 +
  Автор: SoooFast   |   Группа: Пользователи   |   Дата: 31 марта 2011  
tagan,
все может быть :)
Комментариев: 44
Публикаций: 1
ICQ: 680628638
- 244 +
  Автор: maxim95765   |   Группа: Пользователи   |   Дата: 09 апреля 2011  
у меня так быстро работает что её некогда не видно wink
Комментариев: 12
Публикаций: 0
ICQ: --
- -4 +
  Автор: hooligan88   |   Группа: Пользователи   |   Дата: 20 июня 2011  
maxim95765,
E vtyz nj;t
Комментариев: 59
Публикаций: 3
ICQ: 11110509
- 58 +
  Автор: WiNNeR_tig   |   Группа: Пользователи   |   Дата: 26 мая 2012  
убрал всё, поставил просто картинку gif загрузки , смотрится норм ))
Комментариев: 45
Публикаций: 0
ICQ: 591868628
- 1 +
  Автор: mitrofanko   |   Группа: Пользователи   |   Дата: 26 ноября 2012  
я так понял начало надо в head бросать а конец в foot ? так? А то у меня не появилось ниче
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.