Показ прелоадера через определенное время используя Cookie

preloader cookies - Показ прелоадера через определенное время используя Cookie

Стояла задача установить скрипт 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;
}

Новости от партнеров

Комментарии

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *