Новости Скрипты Онлайн сервисы Хитрости Гостевая книга Статистика сайта Реклама на сайте
UsefulScript.ruСкриптыГрафикаИндикатор загрузки сайта
104
397

Индикатор загрузки сайта

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


Индикатор загрузки (картинка) Индикатор загрузки (картинка) Индикатор загрузки (картинка)
Индикатор загрузки (текст)

После того, как сайт загрузился, через две секунды данные индикаторы автоматически плавно пропадают.


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


Для того, чтобы получить на своем сайте подобные исчезающие индикаторы загрузки, Вам понадобится создать блок DIV внутри которого Вы разместите какой-либо текст или изображение. Блок DIV оформляем следующим образом:

HTML код:
<div class="indicator" style="width:200px; border-radius:12px;
border:1px solid #4874a3; padding:5px;"
><img src="indicator.gif" alt="">
</
div>

Далее необходимо будет подключить стандартную библиотеку jQuery следующим образом:

JavaScript код:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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

JavaScript код:
<script type="text/javascript">
$(
document).ready(function(){
    $(
"div.indicator").delay(2000).fadeOut(1000);
});
</script>

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


Дата создания: 20:25:53 26.10.2012 г.
Дата обновления: 18:18:09 05.11.2012 г.
Посещений темы: 10410 раз(а).

Комментарии посетителей (всего 3 шт.):
Юрий
1
# 977
(10:33:04  18.07.2013 г.)

Здравствуйте!
Установил Ваш код. Вместо картинки написал "Загрузка блога".
Всё работает, но запись "Загрузка блога" статична.
Как сделать, чтобы была динамика (движение) как у Вас в примере?
Спасибо.
Ответить

Administrator
0
# 979
(20:25:42  18.07.2013 г.)

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

Андрей
0
# 2477
(10:49:32  13.05.2015 г.)

Спасибо большое. На вашем ресурсе самый понятный пример индикатора.
Ответить

Закрыть
Ваше имя:
958 + 2 =
Добавить комментарий к теме:
Ваше имя:
958 + 2 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то лучше сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Какую CMS для сайта Вы предпочитаете?


Mail.ru LiveInternet