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

Три капли воды на листе растенияНа сайтах с большим количеством разнообразного контента, а также множеством дополнительных элементов навигации и ротации часто возникает (я не побоюсь этого слова) необходимость установить индикатор загрузки веб-страницы. И желательно, скрыть содержимое этой страницы до полной ее готовности, чтобы посетитель не видел как браузер ворочает блоки сайта, расставляя их по своим местам, загружая файл CSS с чужого и не самого быстрого хостинга.
 Сделать такое дополнение можно очень просто. В данной статье показаны два примера реализации функционала и блока индикатора загрузки сайта с помощью jQuery.
Пример 1
 В данном варианте используется jQuery функция .load(), которая обрабатывает событие загрузки страницы, манипулируя при этом добавленными HTML элементами.
 Для реализации необходимо создать два блока:
 - предупреждающий, с индикатором загрузки:
<div class='load_page'>
 <b class='close'>X</b>Страница загружается...
  <br>
 <img src=".../loader.gif" /> <!--картинка индикатора загрузки-->
  <br>
 <b>Подождите</b>
</div>
 - и пустой блок, который скроет или затемнит страницу, ограничивая к ней доступ:
<div class='hidescreen'></div>
 Их можно расположить в любом месте тела документа, но лучше повыше(пораньше), т.е. сразу после открывающего тега <body>.
 Расположение на странице и соответствующий внешний вид этим блокам придается с помощью CSS:
.hidescreen,
.load_page {
 position: fixed;
 display: none; /*изначально блоки скрыты*/
}
.hidescreen {
 z-index: 9998;
 width: 100%;
 height: 100%;
 background: #000000;
 opacity: 0.7;
 filter: alpha(opacity=70);
 left:0;
 top:0;
}
.load_page {
 z-index: 9999; /*значение должно больше чем для .hidescreen*/
 left: 50%;
 top: 50%;
 background: #ffffff;
 padding: 30px 10px;
 text-align: center;
 font: normal normal 15px Verdana;
 border-radius: 3px;
 margin-left: -125px;
 width: 250px;
}
.close {
 position: absolute;
 top: 10px;
 right: 10px;
 border: 1px solid #666;
 border-radius: 2px;
 font: normal bold 12px/14px Comic Sans MS;
 text-align: center;
 background: #FFF;
 color: #C00;
 cursor: pointer;
 height: 14px;
 width: 13px;
}
.close:hover {
 background: #C00;
 color: #FFF;
}
 Теперь остается лишь разместить скрипт jQuery в коде страницы или сайта. Не забываем проверить подключен ли этот фреймворк к сайту, если нет - подключаем. Сам скрипт не большой и выглядит так:
$(function(){
 $('.hidescreen, .load_page').fadeIn(10); //показывает фон и индикатор
 $(window).load(function() {
  $('.hidescreen,.load_page').fadeOut(600); //скрывает, после загрузки страницы
 });
 $('.close').click(function(){ //для тех кому невтерпеж
  $('.hidescreen,.load_page').fadeOut(300);
 });
});
DEMO
 Но этот вариант плох тем, что в начале загрузки сайт виден, и лишь потом появляется фон и индикатор, скрывающие страницу. Такое происходит потому, что изначально эти блоки скрыты стилевыми свойствами, т.е. до тех пор, пока не загрузится и не сработает наш скрипт будет видна "строящаяся" страница сайта или блога. В общем-то, такой подход безопасен и предназначен для тех кто сильно переживает что "у посетителя отключен JavaScript" или что "jQuery к сайту подключен крайне не надежно". Остальные, рисковые ребята, могут применить вариант поэлегантнее представленный ниже.
Пример 2
 Момент с запоздалым появлением индикатора и фона выглядит не очень красиво и поэтому от него личше избавится. Сделать это можно, убрав или заккоментировав в CSS свойство display со значением none для селекторов .hidescreen и .load_page, а также немного изменив представленный ранее скрипт. Т.е. теперь, по умолчанию страница скрыта и будет доступна лишь после того, как все ее элементы будут полностью загружены. Кроме этого можно добавить небольшую паузу перед исчезновением индикатора, при этом оставив кнопку для его закрытия. В итоге получим вот такой скрипт:
$(function(){
 $(window).load(function() {
  $('.hidescreen,.load_page').delay(1000).fadeOut(600);
 });
 $('.close').click(function(){
  $('.hidescreen,.load_page').fadeOut(300).dequeue();
 });
});
DEMO
Вот пожалуй и все. Подбирать изображения индикатора можно на http://ajaxload.info, внешний вид легко настроить в через CSS свойства. В общем - устанавливаем и радуемся. Отзывы, мнения и пожелания можно оставлять в комментариях.
©http://magentawave.com

16 комментариев:

  1. Я намек понял, это для таких долгогрузящихся блогов, как у меня! Спасибо,утановил! Правда от темного фона пришлось отказаться, слайдер просвечивает.

    ОтветитьУдалить
    Ответы
    1. Да уж, ваш слайдер просто не победим, с флешем знамо что делать, а вас надо ковырять. Хотя можно попробовать через CSS у блока слыйдера намеренно z-index понизить. Что-то типа того:
      #slider>ul>li {
      z-index: 100;
      }
      Может поможет...

      Удалить
    2. Спасибо за совет, просто кроме того, темный фон немного напоминает попандер, а так нормально, картинка с загрузкой видна, что придает блогу некоторый шик!

      Удалить
    3. Рад что вам понравилось :) А с блоком самого индикатора можно через CSS все что угодно проделывать - заменить цвет фона или сделать градиент, добавить тень и т.п. - на разный вкус в общем.

      Удалить
  2. Спасибо вам огромное ! Всё четко и ясно)))

    ОтветитьУдалить
  3. Спасибо! Пригодилось!

    ОтветитьУдалить
  4. Анонимный17.09.13, 11:53

    Много интерестного .....автору респект

    ОтветитьУдалить
  5. Спасибо, доходчиво! Заодно и гифку сверстал по ссылке :)

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, заходите еще, может чего еще полезного найдете ;)

      Удалить
  6. А я сколько не пробовал, не получается! Как говорится, то ли я дурак, то ли лыжи не едут))

    ОтветитьУдалить
    Ответы
    1. Ну а этот вариант получился или нет?

      Удалить
    2. Я про этот вариант и писал, что не получилось. Замучался и бросил!

      Удалить
    3. Что бы понять в чем дело
      , нужно знать алгоритм выполнения задачи, возможно где-то допущена ошибка. Здесь изложен общий пример, а не "только для Blogger".

      Удалить
    4. Ну я не профи!А так за пост спасибо, сейчас конечно мне уже он особо не нужен, если только для красоты, блог грузится сейчас быстро даже на при не большой скорости инета, но вообще полезная статья, если что буду пробовать еще, ну или порошу кого-нибудь помочь! Да и за сам Ваш блог спасибо! Очень во многом мне помогли!

      Удалить
    5. И вам спасибо за теплые слова.

      Удалить

Следующее Предыдущее

BestProject