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

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

HIT

29.06.2015

1155

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

Вариант прелоадера №1

Сам скрипт

<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;}

Вариант прелоадера №2

Добавляем body класс on-load (если используется body_class, то добавляем в него body_class(‘on-load’);) и сразу после него прописываем стили верстку и скрипт:

<style>
        /*.on-load {overflow:hidden;}*/
		
        .on-load .preloader {top:0; left:0; right:0; bottom:0; opacity:1;}
		
        .preloader {
            position:fixed;
            top:-100%;
            left:-9999px;
            right:9999px;
            bottom:100%;
            opacity:0;
            z-index:100000;
            background:#282828;
            -webkit-transition:all 0s ease .4s, bottom .5s ease, opacity .2s ease .2s;
            -o-transition:all 0s ease .4s, bottom .5s ease, opacity .2s ease .2s;
            transition:all 0s ease .4s, bottom .5s ease, opacity .2s ease .2s;
        }
		
		.preloader .progressbar {
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
		
		.preloader .progressbar span {display: inline-block; position: relative; overflow: hidden;}
		
        .preloader .progressbar span:after {
            position: absolute;
    		content: '';
    		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		background: rgba(40, 40, 40, 0.9);
        }
		
        .preloader .progressbar.loaded span:after {height:0; -webkit-transition:height 1.4s ease; -o-transition:height 1.4s ease; transition:height 1.4s ease;}
    </style>
<div class="preloader">
	<span class="progressbar">
		<span><img src="/wp-content/uploads/2017/07/MagazIn-logo-w.png"></span>
	</span>
</div>

Любое изображение, например логотип сайта.

<script>
	var progresBar = document.querySelector('.preloader .progressbar');
	window.onload = function() {
		progresBar.classList.add('loaded');
		setTimeout(function() {	document.body.classList.remove('on-load'); }, 700);
	};
</script>

Ну и очень сокращенная версия этого решения, просто плавное исчезновение белого фона после загрузки:

<body <?php body_class('on-load'); ?>>
<style>.preloader {position:fixed; top: 0; left: 0; right: 0; bottom: 0; opacity:0; z-index:100000; visibility: hidden; background:#fff; -webkit-transition:all .3s ease .3s; -o-transition:all .3s ease .3s; transition:all .3s ease .3s;}.on-load .preloader {visibility: visible; opacity:1;}</style>
<div class="preloader"></div><script>window.onload = function() { setTimeout(function() { document.body.classList.remove('on-load'); }, 700); };</script>

В лендингах срабатывает не всегда.

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

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

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

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

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