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

Раздел: PHP кодинг, JavaScript
Показ прелоадера через определенное время используя Cookie


Стояла задача установить скрипт preloader-a, который, прежде чем загрузить страницу, имитировал бы ее загрузку. Время прогрузки, соответственно, регулируемое, но даже при таком раскладе уже через 20+ переходов по страницам эта прогрузка стала не просто надоедать, а даже мешать. Решено было подключить небольшое условие на 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>";

?>


сам peloader:

$(window).on('load', function () {
    var $preloader = $('#page-preloader'),
        $spinner   = $preloader.find('.spinner');
        // $spinner.fadeOut();?>
    $preloader.delay(1500).fadeOut('slow'); //1500 миллисекунд
});


/* ---- 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;
}


картинка:
Скачать oval.zip Размер: 497 b Скачиваний: 124


Понравилась статья "Показ прелоадера через определенное время используя Cookie" из раздела PHP кодинг, JavaScript? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 3360   Дата: 03-мая-2016, 14:31

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика