Как показать предварительный загрузчик страницы только один раз

Добрый день, Я пытаюсь разместить предварительный загрузчик страницы на моей веб-странице. Но я не могу настроить его показываться только один раз, когда я вхожу на страницу. Каждый раз, когда я нажимаю кнопку «домой», он появляется снова. Может ли кто-нибудь помочь мне в этом, пожалуйста?Как показать предварительный загрузчик страницы только один раз

HTML:

<div id="loader-wrapper"> 
    <div id="loader"></div> 

    <div class="loader-section section-left"></div> 
    <div class="loader-section section-right"></div> 
</div>

JS:

$(document).ready(function() { 

    setTimeout(function(){ 
     $('body').addClass('loaded'); 
     $('h1').css('color','#222222'); 
    }, 3000); 

});

CSS:

#loader { 
    display: block; 
    position: relative; 
    left: 50%; 
    top: 50%; 
    width: 150px; 
    height: 150px; 
    margin: -75px 0 0 -75px; 
    border-radius: 50%; 
    border: 3px solid transparent; 
    border-top-color: white; 

    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 

    z-index: 1001; 
} 

    #loader:before { 
     content: ""; 
     position: absolute; 
     top: 5px; 
     left: 5px; 
     right: 5px; 
     bottom: 5px; 
     border-radius: 50%; 
     border: 3px solid transparent; 
     border-top-color: gray; 

     -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
     animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 
    } 

    #loader:after { 
     content: ""; 
     position: absolute; 
     top: 15px; 
     left: 15px; 
     right: 15px; 
     bottom: 15px; 
     border-radius: 50%; 
     border: 3px solid transparent; 
     border-top-color: white; 

     -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 
    } 

    @-webkit-keyframes spin { 
     0% { 
      -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
      -ms-transform: rotate(0deg); /* IE 9 */ 
      transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ 
     } 
     100% { 
      -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
      -ms-transform: rotate(360deg); /* IE 9 */ 
      transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ 
     } 
    } 
    @keyframes spin { 
     0% { 
      -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
      -ms-transform: rotate(0deg); /* IE 9 */ 
      transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ 
     } 
     100% { 
      -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
      -ms-transform: rotate(360deg); /* IE 9 */ 
      transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ 
     } 
    }

источник

2015-09-05 Hynek Š.

При нажатии кнопки «домой», вы перезагрузите страницу, я думаю, так что это ожидаемое поведение. Тем не менее, вы можете использовать файлы cookie и показывать предварительный загрузчик только при первом посещении ... – sinisake

Я знаю .. Вот почему я спрашиваю здесь, как его решить ... Ну, я понятия не имею, как использовать файлы cookie именно так. :( –

http://stackoverflow.com/questions/15935900/how-to-show-page-preloader-only-once-while-entering-through-domain-name –

if (!$.cookie('loaded')) { 
    // show preloader 
    // your code 
    // create cookie 
    $.cookie('loaded', true, {expires: 365}); 
}

или попробовать это:

$(document).ready(function($) { 

    if ($.cookie('preloader')) 
    { 
     $('#loader-wrapper').hide(); 
    } 
    else { 
     setTimeout(function(){ 
      $('body').addClass('loaded'); 
      $('h1').css('color','#222222'); 
     }, 3000); 

     // and now we create 1 year cookie 
     $.cookie('preloader', true, {path: '/', expire: 365}); 
    } 
});

Скачать здесь JavaScript API для обработки печенье: https://github.com/js-cookie/js-cookie Включить после Jquery jquery.cookie.js

источник

2015-09-05 13:33:53

Я пробовал оба сценария, но они didn ' t work ..:/now, когда я загружаю страницу, она даже не останавливает «предварительную загрузку». –

@ HynekŠ.Add jquery.cookie.js –

@ HynekŠ.I пробовал этот код, и он работает для меня ... –

Как показать предварительный загрузчик страницы только один раз

ответ

Смежные вопросы