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

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

HIT

29.06.2015

3175

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

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

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

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

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

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