Ставим прелоадер (анимированую картинку-индикатор загрузки сайта) перед полной загрузкой страницы сайта. Данная техника рекомендуется для создания красивого эффекта если страница большая и грузится не сразу.

Примеры картинок-прелоадеров:

spinnerпрелоадерпрелоадер

Принцип работы скрипта таков: как можно раньше показать посетителю сайта индикатор загрузки, желательно на каком-либо фоне, а по окончании загрузки этот индикатор скрыть.

Итак:

Подключаем Jquery: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.31.1/jquery.min.js"></script>

JS:

<script>
$(window).on('load', function () {
var $preloader = $('#page-preloader'),
$spinner = $preloader.find('.spinner');
$spinner.fadeOut();
$preloader.delay(350).fadeOut('slow');
});
</script>

HTML:

<div id="page-preloader"><span class="spinner"></span></div>

CSS:

#page-preloader {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #000;
z-index: 100500;
opacity:1;
}
#page-preloader .spinner {
width: 43px;
height: 43px;
position: absolute;
left: 50%;
top: 50%;
background: url('../images/spinner.gif') no-repeat 50% 50%;
margin: -26px 0 0 -26px;
}

Не забываем загрузить на сервер картинку-заставку spinner.gif

 

Добавить комментарий


Защитный код
Обновить