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

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

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

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

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

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

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

Идёт загрузка сайта

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

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

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

Идёт загрузка сайта

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

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


Опубликовано: 7.10.2010 18:49

Просмотров всего: 3611



Добавить комментарий:

Для обновления картинки кликните по ней.

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

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