Индикатор загрузки сайта
Данный скрипт будет полезен тем, чьи сайты медленно грузятся, т.к. индикатор загрузки позволит Вашим посетителям понять, что процесс загрузки сайта еще идет. Ниже мы хотим привести пример подобных индикаторов, которые Вы можете разместить в любом месте Вашего сайта:
|
 |
После того, как сайт загрузился, через две секунды данные индикаторы автоматически плавно пропадают.
В данном примере мы специально установили таймаут в две секунды для того, чтобы индикаторы загрузки пропадали не сразу, а только через две секунды после окончания загрузки сайта. Обратите внимание, что индикаторы плавно растворяются, что тоже смотрится очень красиво.
Для того, чтобы получить на своем сайте подобные исчезающие индикаторы загрузки, Вам понадобится создать блок DIV внутри которого Вы разместите какой-либо текст или изображение. Блок DIV оформляем следующим образом:
<div class="indicator" style="width: 200px; border-radius: 12px;
border: 1px solid #4874a3; padding: 5px;"><img src="indicator.gif" alt="">
</div>Далее необходимо будет подключить стандартную библиотеку jQuery следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>После того, как jQuery библиотека подключена, нам необходимо отслеживать событие окончания загрузки странички ($(document).ready()), чтобы убрать наши индикаторы загрузки. За это отвечает вот такой совсем компактный код:
<script type="text/javascript">
$(document).ready(function(){
$("div.indicator").delay(2000).fadeOut(1000);
});
</script>Как Вы могли заметить, скрипт совсем маленький, но возможно, при его помощи Вам удастся удержать "торопливых" посетителей, которые, не дождавшись загрузки странички, подумают что сайт не работает и покинут его.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Установил Ваш код. Вместо картинки написал "Загрузка блога".
Всё работает, но запись "Загрузка блога" статична.
Как сделать, чтобы была динамика (движение) как у Вас в примере?
Спасибо.