Кодировка HTML | Демо-сайт CMS uCoz | Почта

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

Архив полностью рабочих скриптов и так далее...

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

Сообщение AllCity » 19 апр 2008, 13:40

Скрипт выставляете в самый верх кода сайта, после <body>.

Загрузить файл из архива load.zip к себе на сервер (FTP) ссылка ниже!

Сам скрипт и код:
Код: Выделить всё
<div id="loader"><div class="loaderBody">
<
img src="/loading.gif" alt="Загрузка" style="margin-bottom: 20px;" /><br>
<
span style="color:#6f92a7;">Идет загрузка страницы, пожалуйста, подождите немного.</span><br>
<
span style="color:#acacac">Если Вы в первый раз на нашем сайте, загрузка продлится чуть дольше обычного.</span></div></div>
<
script type="text/javascript" src="/load.js"></script>


CSS Ставить между <head> и </head> или в css файл но тогда без тегов <style type="text/css"> и </style>
Код: Выделить всё
<style type="text/css">
  div#loader {
  margin: 0 auto;
  margin-top:10px;
  width:1000px;
  height:400px;
  }
  .loaderBody {
  text-align:center;
  margin-top:150px;
  line-height:16px;
  font-size:11px;
  }
</style>
Вложения
load.zip
(1.77 Кб) Скачиваний: 302
Последний раз редактировалось AllCity 20 мар 2009, 00:07, всего редактировалось 1 раз.
Аватара пользователя
AllCity
Администратор
Администратор
 
Автор темы
Сообщения: 2505
Возраст: 32
Зарегистрирован: 18 апр 2008, 17:52
Карма: + 147 -
Откуда: Израиль, Тель-Авив

Индикатор загрузки* (как в DLE)

Сообщение AllCity » 19 апр 2008, 13:48

1. Открываем шаблон
2. В любом месте между тегами <head> и </head> добавляем код:
Код: Выделить всё
<script type="text/javascript">
function hideLoading()
{
document.getElementById('pageIsLoading').style.display = 'none';
}
</script>

3. Сразу после тега <body> добавляем код:
Код: Выделить всё
<div id="pageIsLoading" style="position:absolute;
      display:block;
      padding-left:44px;
      padding-right:12px;
      width:auto;
      height:46px;
      line-height:46px;
      border:1px solid #890000;
      color:#000000;
      font-weight:bold;
      background-color:#e5e5e5;
      background-image:    url(http://www.путь_к_папке_images/имя_картинки.gif);
      background-position: 6px center;
      background-repeat: no-repeat;">
<script type="text/javascript">
if (typeof window_width == 'undefined' || typeof window_height == 'undefined')
     {
var window_width; var window_height;
if( typeof( window.innerWidth ) == 'number' )
     {
window_width = window.innerWidth; window_height = window.innerHeight;
}
     else
if(document.documentElement && ( document.documentElement.clientWidth ||
document.documentElement.clientHeight ) )
     {
window_width = document.documentElement.clientWidth;
window_height = document.documentElement.clientHeight;
}
     else
     if(document.body && ( document.body.clientWidth ||
document.body.clientHeight ) )
     {
window_width = document.body.clientWidth;
window_height = document.body.clientHeight;
}
}
var left = Math.round((window_width - 200) / 2);
var top = Math.round(((window_height - 46) / 3) + 46);
document.getElementById('pageIsLoading').style.left = left+'px';
document.getElementById('pageIsLoading').style.top = top+'px';
</script>
Загружается... Ждите...
</div>

Разумеется, настройки стиля отображения и текста можно изменить на ваш вкус. Вместо "имя_картинки" введите название файла изображения, которое вы желаете показать на индикаторе. Лучше всего сюда подойдет анимированный GIF с изображением, например, песочных часов. Размер картинки при указанных в примере установках - примерно 32х32 пикселя. (Пак картинок можно скачать ниже)

4. Непосредственно перед тегом в самом конце файла добавляем код:
Код: Выделить всё
<script type="text/javascript">
if (window.addEventListener) {
       window.addEventListener('load', hideLoading, false);
}
      else if (window.attachEvent) {
      var r = window.attachEvent("onload", hideLoading);
}
      else {
hideLoading(); 
}
</script>

5. Любуемся результатом...

Вложения
loading_img.zip
(207.44 Кб) Скачиваний: 435
Аватара пользователя
AllCity
Администратор
Администратор
 
Автор темы
Сообщения: 2505
Возраст: 32
Зарегистрирован: 18 апр 2008, 17:52
Карма: + 147 -
Откуда: Израиль, Тель-Авив


Вернуться в Архив скриптов и интересных решений

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron