Недавно на одном из своих проектов мне захотелось сделать первую загрузку сайта с прелоадером в виде логотипа, как это делают в приложениях, например вконтакте или инстаграмм. Так как я использую WordPress, то самым простым способом будет сделать preloader для сайта на JQuery.
Код HTML
Можно по разному создавать код preloader в HTML, с изображением внутри через тег img, текстом или иконками, я сделал это одним блоком div с фоновым изображением логотипа. Данный блок вставляем в файл header.php сразу после открывающего тега <body>.
<div class="preloader"></div>Стили CSS
Путь до изображения указывайте свой. Можно добавить анимацию по желанию или сразу поставить анимированное изображение. Стили прописываем в файл стилей вашей темы или дочерней темы.
.preloader {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: #fff url(../img/logo.svg) center center no-repeat;
background-size: 132px;
}Код JQuery
Код должен вызываться после загрузки JQuery в блоке head. При первой загрузке страницы будет показываться preloader и плавно исчезать. При этом установим метку showPreloader в localStorage со значением false, чтобы при следующей загрузке скрипт определил, что уже не нужно показывать preloader и назначал ему свойство display: none.
// Preloader
$(window).on('load', function() {
if(localStorage.getItem('showPreloader') == 'false') {
$('.preloader').css('display', 'none')
} else {
$('.preloader').fadeOut().end().delay(400).fadeOut('slow')
localStorage.setItem('showPreloader', 'false')
}
});