Индикаторы загрузки и их использование

Здравствуйте, сегодня расскажу вам про индикаторы загрузки и интересный и простенький скрипт, который позволит его вставить на странички вашего сайта.

Скачать исходники для статьи можно ниже

Зачем нужен индикатор?
Индикатор больше актуален для многовесящих сайтов, или для посетителей с низкой скоростью интернета, которые во время загрузки сайта видят только белую пустую страничку и долгое время не могут понять то ли он пустой, то ли долго загружается по причине большого размера файла.
После 100% загрузки сайта индикатор пропадет.

Где взять индикаторы загрузки:

1. http://preloaders.net/ru/ – на русском языке.

2. http://www.ajaxload.info/

Здесь в строчке:
Indicator type – выбираете индикатор.
Background color – цвет фона, можно поставить прозрачный.
Foreground color – цвет переднего плана.
Далее жмете на кнопку Generate it!
А после на кнопку Download it!
После чего скачиваете gif индикатор загрузки.

Как вставить индикатор загрузки?

Предлагаю вам вот такой простенький скрипт:

<script language="javascript" type="text/javascript">      
<!-- Begin
function loadImages() {
if (document.getElementById) {  // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
}
window.onload = loadImages;
//  End -->
</script>
<div id="hidepage" style=" background-color: #FFFFCC; layer-background-color: #FFFFCC; width: 100%;">
<pre><img src="/wp-content/uploads/2012/11/ajax-loader.gif" />  Происходит загрузка странички ...    </pre></div>

Данный скрипт нужно вставить после тега , то есть заходим в панель управления сайтом, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, далее в списке шаблонов ищем файл header.php и в его коде ищем тег , например у меня он выглядел так:

...
</head>
<body <?php body_class(); ?>>
...

Вот сразу после него и вставляем вышеуказанный скрипт, получим приблизительно следующее:

...
</head>
<body <?php body_class(); ?>>

<script language="javascript" type="text/javascript">      
<!-- Begin
function loadImages() {
if (document.getElementById) {  // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
}
window.onload = loadImages;
//  End -->
</script>
<div id="hidepage" style=" background-color: #FFFFCC; layer-background-color: #FFFFCC; width: 100%;">
<pre><img src="/wp-content/uploads/2012/11/ajax-loader.gif" />  Происходит загрузка странички ...    </pre></div>
...

В результате мы получим следующее: