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

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

HIT

29.06.2015

2503

Делаем полную загрузку сайта перед показом посетителю. Для этого создаем предварительный экран 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>

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

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

Добавляем стили, желательно сразу после body (для быстроты срабатывания):


<style>
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #ffc107;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
	z-index: 1001; /* anything higher than z-index: 1000 of .loader-section */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #ffeb3b;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}


#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    background: #fff;
    z-index: 1000;
}
 
#loader-wrapper .loader-section.section-left {left: 0;}
 
#loader-wrapper .loader-section.section-right {right: 0;}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(-100%);  /* IE 9 */
    transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
}
 
.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(100%);  /* IE 9 */
    transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
}


.loaded #loader {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out; 
            transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {visibility: hidden;}

.loaded #loader-wrapper .loader-section.section-right,
.loaded #loader-wrapper .loader-section.section-left {
 
    -webkit-transition: all 0.3s 0.3s ease-out; 
            transition: all 0.3s 0.3s ease-out;
}

.loaded #loader-wrapper {
        -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);
 
        -webkit-transition: all 0.3s 0.6s ease-out; 
                transition: all 0.3s 0.6s ease-out;
}
</style>

Далее сам preloader:

<div id="loader-wrapper">
    <div id="loader"></div>
 
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
 
</div>

Прописываем скрипт убирать прелоадер после загрузки страницы:

jQuery(document).ready(function() {
    setTimeout(function(){
        $('body').addClass('loaded');
    }, 1000);	
});

Поделиться в соц. сетях:

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

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

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

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