Встановити індикатор і приховати сторінку до повного завантаження

Встановити індикатор і приховати сторінку до повного завантаження

На сайтах з великою кількістю різноманітного контенту, а також безліччю додаткових елементів навігації та ротації часто виникає (я не побоюся цього слова) необхідність встановити індикатор завантаження веб-сторінки. І бажано, приховати вміст цієї сторінки до повної її готовності, щоб відвідувач не бачив як браузер орудує блоки сайту, розставляючи їх по своїх місцях, завантажуючи файл CSS з чужого і не найшвидшого хостингу.
Зробити таке доповнення можна дуже просто. У даній статті показані два приклади реалізації функціоналу і блоку індикатора завантаження сайту за допомогою jQuery.
приклад 1
В даному варіанті використовується jQuery функція .load (). яка обробляє подія завантаження сторінки, маніпулюючи при цьому доданими HTML елементами.
Для реалізації необхідно створити два блоки:
- застережливий, з індикатором завантаження:

- і порожній блок, який приховає або затемнить сторінку, обмежуючи доступ до неї:

Їх можна розташувати в будь-якому місці тіла документа, але краще вище (раніше), тобто відразу після відкриваючого тега .
Розташування на сторінці і відповідний зовнішній вигляд цих блоках надається за допомогою 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);
>);
>);

$ (Function () $ (window) .load (function () $ ( '. Hidescreen, .load_page'). Delay (1000) .fadeOut (600);
>);
$ ( '. Close'). Click (function () $ ( '. Hidescreen, .load_page'). FadeOut (300) .dequeue ();
>);
>);