如何僅顯示頁面預加載器一次

下午好，我正嘗試將頁面預加載器放入我的網頁。但是當我進入頁面時，我無法將其設置爲僅顯示一次。每當我點擊「home」按鈕時，它就會再次出現。有誰能幫我解決這個問題嗎？如何僅顯示頁面預加載器一次

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，並只顯示preloader第一次訪問... – 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處理Cookie：https://github.com/js-cookie/js-cookie 包括jQuery的後jquery.cookie.js

來源

2015-09-05 13:33:53

我試過這兩個腳本，但他們didn' t工作..：/現在當我加載頁面，它甚至不會停止「預加載」.. –

@HynekŠ.Addjquery.cookie.js –

@HynekŠ.I試過這段代碼，它適用於我... –

如何僅顯示頁面預加載器一次

回答

相關問題