Прелоадер-скрипт — это «завеса», предназначенная скрывать от глаз пользователей процесс загрузки страницы. Нередки случаи, когда по разным причинам сайт грузиться не так быстро, из-за чего плавает верстка. Все эти процессы будут спрятаны от посетителя красивым прелоадерем. Вы можете оформить его на свое усмотрение: будь то какая-нибудь анимационная картинка, изображение со статичной рекламой или же контактная информация. Также в скрипте предусмотрена возможность настроить таймер работы преоладера.
Установка
Файлы body.html и head.html открывайте в текстовом редакторе, например, в «Блокноте».
В BODY добавьте следующий исходный код (файл body.html)
|
1 2 3 4 5 6 7 8 9 |
<script> /* Прелоадер 17.9.7.2 */ var timeout = 5000; //В миллисекундах $(document).ready(function() { setTimeout(function() { $('.preloader-overlay').fadeOut(); }, timeout); }); </script> |
Вы можете задать таймаут timeout=0 , тогда прелоадер исчезнет сразу как загрузится документ.
В HEAD добавьте следующие стили (файл head.html)
В background-image замените ссылку на свое изображение.
У Прелоадера есть 2 варианта отображения: полноэкранный и стандартный.
Полноэкранный режим
Для отображения в полноэкранном режиме, необходимо указать class=fullscreen.
|
1 2 3 |
<div class="preloader-overlay"> <div class="preloader fullscreen"></div> </div> |
В этом случае ваше изображение будет растянуто на весь экран. Можно использовать, к примеру, для показа рекламных материалов.
Стандартный режим
А для вывода в стандартном режиме – class=standart.
|
1 2 3 |
<div class="preloader-overlay"> <div class="preloader standart"></div> </div> |
Этот режим, как правило, используют для анимации загрузки страницы.
