如何限制每個會話顯示一次preloader？

Question

在我的網站上，我在每個頁面上都有一個預加載器。

<div id="preloader" > 
<div id="status"></div> 
<div id="statustext">some text</div> 
</div> 

它是通過這個jQuery觸發：

//<![CDATA[ 
var sCookie = Cookies.get('cargado'); 

if (sCookie != null) 
{ 

    $('#preloader').hide(); 
} 
else 
{ 
    $(window).on('load', function() 
    { // makes sure the whole site is loaded 
     $('#status').fadeOut(); // will first fade out the loading animation 
     $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website. 
     $('body').delay(350).css({ 'overflow': 'visible' }); 
     Cookies.set('cargado', 'si'); 

    }) 
} 
    //]]> 

我需要的是，預加載應該只會出現一次會議。換句話說，如果一個用戶在我的網站上訪問了10個頁面，他應該只在第一頁看到它，不管他是從主頁還是內部頁面進入網站。我想出了上面顯示的解決方案，但是儘管設置了正確地上傳cookie不會隱藏preloader div。

我創建了一個測試頁面在這裏：http://www.mejoresdatos.cl/testpage.html

Answer 1

使用localStorage的/ sessionStorage的，而不是餅乾

<style> 
#preloader 
    { 
    display:none; 
    } 
</style> 

$(window).on('load', function() 
     { // makes sure the whole site is loaded 
      if (typeof(Storage) !== "undefined") { 
       // Code for localStorage/sessionStorage.     
       if(localStorage.isFirstLoadComplete==="false"){ 
        $('#preloader').show(0); 
        $('#status').fadeOut(); // will first fade out the loading animation 
        $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website. 
        $('body').delay(350).css({ 'overflow': 'visible' }); 
        localStorage.setItem("isFirstLoadComplete", "true"); 
       } 
      } else { 
       // Sorry! No Web Storage support.. 
      } 
     });