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

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

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

javascript css preloader
person Hynek Š.    schedule 05.09.2015    source источник
comment
Когда вы нажимаете кнопку «домой», вы перезагружаете страницу, я думаю, так что это ожидаемое поведение. Однако вы можете использовать файлы cookie и показывать предварительный загрузчик только при первом посещении ...   -  person sinisake    schedule 05.09.2015
comment
Я знаю .. Вот почему я спрашиваю, как это решить ... Ну, я понятия не имею, как использовать файлы cookie таким образом .. :(   -  person Hynek Š.    schedule 05.09.2015
comment
stackoverflow.com/questions/15935900/   -  person Madalina Taina    schedule 05.09.2015

Ответы (1)


arrow_upward
2
arrow_downward 

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 для обработки файлов cookie: https://github.com/js-cookie/js-cookie Включить после jquery jquery.cookie.js

person Madalina Taina    schedule 05.09.2015
comment
Я пробовал оба скрипта, но они не работали ..: / теперь при загрузке страницы не перестает даже предварительная загрузка .. - person Hynek Š.; 05.09.2015
comment
@ HynekŠ. Добавить jquery.cookie.js - person Madalina Taina; 05.09.2015
comment
Я добавил jquery.cookie.js, но все та же проблема. Даже не имеет значения, какой из этих кодов я пробую, но прелоадер никогда не перестает загружаться ..: / - person Hynek Š.; 05.09.2015
comment
Хорошо, теперь это работает и у меня! Большое спасибо! :) - person Hynek Š.; 05.09.2015
comment
Добро пожаловать! Я рад, что это сработало. :) Извините, я не смог объяснить лучше. - person Madalina Taina; 05.09.2015