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