Русская Joomla!
Главная arrow Главная arrow Шаблоны и дизайн arrow Создаем индикатор загрузки сайта

Создаем индикатор загрузки сайта

 Печать E-mail
Автор Александр Викторович Ковалев   
03.04.2006 г.

    Краткая инструкция по добавлению в шаблон "Индикатора загрузки" - т.е. маленького окошечка, которое будет демонстрироваться  пользователю, пока грузится ваш сайт, чтобы посетителям не было скучно...

Приступим. 

1. Открываем файл index.php шаблона.

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. Непосредственно перед тегом </body> в самом конце файла index.php добавляем код: 

<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. Закидываем нужную картинку в папку images вашего сайта, или в любую другую, путь к которой будет указан в вашем коде.

 

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

 

При написании статьи использованы исходники от D4.
Последнее обновление ( 12.01.2007 г. )
 
« Пред.   След. »
ИгроМагаз. Вы можете купить playstation network. Магазин для геймеров.