Javascript 如何只显示一次页面预加载程序

下午好， 我正在尝试将页面预加载程序放入我的网页。但是当我进入页面时，我不能将其设置为只显示一次。每次我点击“主页”按钮时，它都会再次出现。谁能帮我一下吗

HTML:

CSS:

或者试试这个：

$(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});
    }
});

从此处下载用于处理cookie的JavaScript API：

---

Include after jquery jquery.cookie.js

当您按下“主页”按钮时，我想您会重新加载页面，所以这是预期的行为。但是，您可以使用cookies，并且仅在第一次访问时显示预加载程序…我知道。。这就是为什么我在这里问如何解决它。。。嗯，我不知道如何用这种方式使用cookies…：（我尝试了两种脚本，但都不起作用…：/现在当我加载页面时，它甚至没有停止“预加载”..@HynekŠ.Add jquery.cookie.jsI已经添加了jquery.cookie.js，但仍然存在相同的问题。我尝试哪种代码并不重要，但预加载程序从未停止加载….:/Ok，它现在也适用于我！非常感谢！：）欢迎！我很高兴它成功了。：）对不起，我无法更好地解释。

$(document).ready(function() {

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

});

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

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});
    }
});