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

Читайте также

Похожие записи

IDE — как найти идеальную для себя редактор кода
Каждый, кто работает с PHP кодом в определенный момент осознает, что привычные реакторы, для написания HTML / CSS / JS...
Автоматизация мелких продаж, CMS или самописная платформа?
В свое время баловался переделкой движков и плагинов финансовых проектов (CAP, MLM) и была проблема с автоматизацией продаж. Точнее, с...
PHP 7.2 — добавлен новый алгоритм хэширования, удален Mcrypt
В PHP 7.2 добавлен алгоритм хэширования нового поколения, который вскоре может вытеснить Bcrypt, а также удалена библиотека шифрования Mcrypt и...
PHP — ротатор объемных кодов (переосмысление)
Изучив PHP до уровня между middle и junior и перечитывая старые статьи порой становится стыдно за тот бред, который когда-то...
PHP — делаем проверку наличия HTTPS или редирект
Задача: Не всегда получается настроить .htaccess для принудительного редиректа на протокол HTTPS и как-то необходимо выкручиваться! Если мы знаем, где находится код, отвечающий за роутинг...

Комментарии

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

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