Устанавливаем индикатор загрузки страницы сайта

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

Чтобы дать посетителю понять, что страница всё-таки находится в стадии загрузки, а не пустая, надо установить индикатор загрузки страницы сайта, который будет выводиться на странице до тех пор, пока та полностью не загрузится.

Если Ваш сайт долго грузится, то есть смысл установить его у себя на сайте. Как это сделать, Вы узнаете из этого урока.

И так, Вам понадобится сам индикатор, роль которого будет выполнять анимационная картинка в формате gif и скрипт, управляющий выводом этой картинки на экран монитора до тех пор, пока полностью не загрузится страница с её содержимым.

Картинку на свой вкус можно создать в графическом редакторе (лично я предпочитаю Photoshop и CorelDraw). Для тех, кто ещё не успел изучить эти программы, даю сайт http://www.ajaxload.info/, где Вы можете сгенерировать себе одну из понравившихся картинок.

От себя же выкладываю картинку, созданную мною в Photoshop. Если кому-то она понравится больше тех, что Вы найдёте на указанном сайте, то, пожалуйста, сохраняйте её у себя на компьютере и пользуйтесь на здоровье!

Теперь о самом скрипте. Установите на страницу следующий код:

• Код между тегами HEAD

  
  <style type="text/css">
/* Выравнивание картинки по центру страницы */
.centered {
position: absolute;
top: 50%;
left: 50%;
margin-top: -7px; /* 50% высоты картинки */
margin-left: -76px; /* 50% ширины картинки */
padding-left: 20px;
padding-right: 20px;
padding-top:10px;
height:46px;
border: 1px solid #890000;
font-weight: bold;
background-color: #e5e5e5;
}
* html .centered {
position: absolute;
}
</style>

<script type="text/javascript">
function hideLoading() {
document.getElementById('pageIsLoading') .style.display = 'none';
}
</script>

• Код в начале тега BODY

  
  <div id="pageIsLoading" class="centered">
<img src="img/load.gif" width="152" height="15">
<span style="padding-left:28px">Идёт загрузка</span>
<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>

• Код в конце тега BODY

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

В стилях значения свойств подогнаны под размеры картинки, которую я выложил на странице. Если будете использовать другую картинку, то нужно адаптировать её под свои размеры. И не забудьте в теге img прописать свой путь к картинке-индикатору (выделено в коде красным цветом).

В итоге у Вас получится следующий результат:

Картинку я показал в gif-формате не анимированную, на самом деле у Вас индикатор будет в движении (анимирован), как на предоставленной выше картинке.

Теперь посетитель не покинет Ваш сайт и дождётся его полной загрузки.

Оставлять комментарии могут только авторизованные пользователи. Для этого необходимо зарегистрироваться на сайте и войти в свой аккаунт.

Комментарии:

Нет комментариев.