Стояла задача установить скрипт preloader-a, который, прежде чем загрузить страницу, имитировал бы ее загрузку. Время прогрузки, соответственно, регулируемое, но даже при таком раскладе уже через 20+ переходов по страницам эта прогрузка стала не просто надоедать, а даже мешать. Решено было подключить небольшое условие на php.
Код PHP
<?php //сразу после тега <body>
SetCookie("Preloader","TimeToLive",time()+366); //присваиваем куки на 366 секунд
if(($_COOKIE['Preloader'] != 'TimeToLive')) //проверяем наличие ключа и значения в массиве и выводим preloader
echo"<div id='page-preloader'><div class='contpre'><span class='spinner'></span><br>Подождите<br><small>идет загрузка</small></div></div>";
?>Код jQuery
$(window).on('load', function () {
var $preloader = $('#page-preloader'),
$spinner = $preloader.find('.spinner');
// $spinner.fadeOut();?>
$preloader.delay(1500).fadeOut('slow'); //1500 миллисекунд
});Код CSS
/* ---- preloader */
#page-preloader{
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
background: #9A12B3;
z-index: 30;
}
.contpre small{
font-size:25px;
}
.contpre{
width: 250px;
height: 100px;
position: absolute;
left: 50%;top: 48%;
margin-left:-125px;
margin-top:-75px;
color:#f1f1f1;
font-size:40px;
letter-spacing:-2px;
text-align:center;
line-height:35px;
}
#page-preloader .spinner {
position: absolute;
width: 41px;
height: 41px;
background: url(../images/oval.svg) center center no-repeat;
/* background: url(../images/load.gif) center center no-repeat; */
background-size:41px;
margin: -16px 0 0 -16px;
}
Комментарии