Сделать такое дополнение можно очень просто. В данной статье показаны два примера реализации функционала и блока индикатора загрузки сайта с помощью jQuery.
Пример 1
В данном варианте используется jQuery функция .load(), которая обрабатывает событие загрузки страницы, манипулируя при этом добавленными HTML элементами.
Для реализации необходимо создать два блока:
- предупреждающий, с индикатором загрузки:
<div class='load_page'>
<b class='close'>X</b>Страница загружается...
<br>
<img src=".../loader.gif" /> <!--картинка индикатора загрузки-->
<br>
<b>Подождите</b>
</div>
- и пустой блок, который скроет или затемнит страницу, ограничивая к ней доступ:<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 в коде страницы или сайта. Не забываем проверить подключен ли этот фреймворк к сайту, если нет - подключаем. Сам скрипт не большой и выглядит так:.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;
}
$(function(){
$('.hidescreen, .load_page').fadeIn(10); //показывает фон и индикатор
$(window).load(function() {
$('.hidescreen,.load_page').fadeOut(600); //скрывает, после загрузки страницы
});
$('.close').click(function(){ //для тех кому невтерпеж
$('.hidescreen,.load_page').fadeOut(300);
});
});
DEMO$('.hidescreen, .load_page').fadeIn(10); //показывает фон и индикатор
$(window).load(function() {
$('.hidescreen,.load_page').fadeOut(600); //скрывает, после загрузки страницы
});
$('.close').click(function(){ //для тех кому невтерпеж
$('.hidescreen,.load_page').fadeOut(300);
});
});
Но этот вариант плох тем, что в начале загрузки сайт виден, и лишь потом появляется фон и индикатор, скрывающие страницу. Такое происходит потому, что изначально эти блоки скрыты стилевыми свойствами, т.е. до тех пор, пока не загрузится и не сработает наш скрипт будет видна "строящаяся" страница сайта или блога. В общем-то, такой подход безопасен и предназначен для тех кто сильно переживает что "у посетителя отключен 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$(window).load(function() {
$('.hidescreen,.load_page').delay(1000).fadeOut(600);
});
$('.close').click(function(){
$('.hidescreen,.load_page').fadeOut(300).dequeue();
});
});
Вот пожалуй и все. Подбирать изображения индикатора можно на http://ajaxload.info, внешний вид легко настроить в через CSS свойства. В общем - устанавливаем и радуемся. Отзывы, мнения и пожелания можно оставлять в комментариях.
©http://magentawave.com
Я намек понял, это для таких долгогрузящихся блогов, как у меня! Спасибо,утановил! Правда от темного фона пришлось отказаться, слайдер просвечивает.
ОтветитьУдалитьДа уж, ваш слайдер просто не победим, с флешем знамо что делать, а вас надо ковырять. Хотя можно попробовать через CSS у блока слыйдера намеренно z-index понизить. Что-то типа того:
Удалить#slider>ul>li {
z-index: 100;
}
Может поможет...
Спасибо за совет, просто кроме того, темный фон немного напоминает попандер, а так нормально, картинка с загрузкой видна, что придает блогу некоторый шик!
УдалитьРад что вам понравилось :) А с блоком самого индикатора можно через CSS все что угодно проделывать - заменить цвет фона или сделать градиент, добавить тень и т.п. - на разный вкус в общем.
УдалитьСпасибо вам огромное ! Всё четко и ясно)))
ОтветитьУдалитьСпасибо! Пригодилось!
ОтветитьУдалитьМного интерестного .....автору респект
ОтветитьУдалитьСпасибо великодушно
ОтветитьУдалитьСпасибо, доходчиво! Заодно и гифку сверстал по ссылке :)
ОтветитьУдалитьПожалуйста, заходите еще, может чего еще полезного найдете ;)
УдалитьА я сколько не пробовал, не получается! Как говорится, то ли я дурак, то ли лыжи не едут))
ОтветитьУдалитьНу а этот вариант получился или нет?
УдалитьЯ про этот вариант и писал, что не получилось. Замучался и бросил!
УдалитьЧто бы понять в чем дело
Удалить, нужно знать алгоритм выполнения задачи, возможно где-то допущена ошибка. Здесь изложен общий пример, а не "только для Blogger".
Ну я не профи!А так за пост спасибо, сейчас конечно мне уже он особо не нужен, если только для красоты, блог грузится сейчас быстро даже на при не большой скорости инета, но вообще полезная статья, если что буду пробовать еще, ну или порошу кого-нибудь помочь! Да и за сам Ваш блог спасибо! Очень во многом мне помогли!
УдалитьИ вам спасибо за теплые слова.
Удалить