/ Сайтостроение / Scripts & jquery / Полная загрузка сайта перед показом

Полная загрузка сайта перед показом

29.06.2015

945

Делаем полную загрузку сайта перед показом посетителю. Для этого создаем предварительный экран preloader.

Сам скрипт

<script type="text/javascript">

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

Код сразу после открытия BODY

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

CSS

/* Полная загрузка страницы (Pre-loader) */

#page-preloader {
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 background: #000;
 z-index: 100500;
}

#page-preloader .spinner {
 width: 32px;
 height: 32px;
 position: absolute;
 left: 50%;
 top: 50%;
 background: url(/wp-content/themes/tester/images/loading.gif) no-repeat 50% 50%;
 margin: -16px 0 0 -16px;
}

Эффект появления элементов при прелоадере

Если на сайте (лэндинге) стоит прелоадер, то эффекты динамического появления прописанные для элементов главного экрана будут отрабатываться «под прелоадером» и пользователь не увидит этих эффектов.

В этом случае их необходимо прописывать отдельными скриптами с таймером, пример:

$(window).on('load', function () {
    var $preloader = $('#page-preloader'),
        $spinner   = $preloader.find('.spinner');
    $spinner.fadeOut();
    $preloader.delay(300).fadeOut(2000);
	
setTimeout(function(){ jQuery('#land-menu').addClass('visible animated bounceInLeft'); }, 1000);
setTimeout(function(){ jQuery('header').addClass('visible animated fadeInDown'); }, 2000);
});

При этом элементам, которые должны таким образом появиться должны быть изначально невидимыми, класс hidden.

Стили hidden/visible:

.hidden {
    opacity: 0;
    -o-transition: all 0.6s;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease 0s;
}

.visible {
    opacity: 1;
}

Поделится информацией с друзьями

  • Комментарии
  • Вложения

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

Пока нет комментариев. Будь первым!

Полная загрузка сайта перед показом
Тема StoreFront
Рекомендации для васТема StoreFrontOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.