Суббота, 28.12.2024, 03:40
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: @Demon@  
Индикаторы загрузки сайта
@Demon@Дата: Воскресенье, 19.04.2009, 14:36 | Сообщение # 1
Администратор
Группа: Администраторы
Сообщений: 282
За 100 Постов Бог сайта и форума За хорошую посещаемость на форуме За супер посещаемость За Генералиссимуса За 1 пост За 5 Постов За 10 Постов
Статус: Offline
Описание:
При загрузке страницы появляется окно с надписью и анимацией которая информирует что страница грузится и предлогает подождать.
ПРИМЕР
Установка:
Перед </head> добавляем код:
Code
<script type="text/javascript">
function hideLoading()
{
document.getElementById('pageIsLoading').style.display = 'none';
}
</script>

Сразу после тега <body> добавляем код

Code
<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 пикселя. (Пак картинок можно скачать ниже)

Непосредственно перед тегом </body> в самом конце файла добавляем код:

Code
<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>

СТАНДАРТНЫЙ ВАРИАНТ КАРТИНКИ






 
  • Страница 1 из 1
  • 1
Поиск:


X~Rush^Gam1ng* Бесплатный конструктор сайтов - uCoz ||