2017-02-23 104 views
-1

我在我的網站的首頁上使用頁面加載器,我希望它只在有人第一次訪問我的網站時運行,所以稍後頁面將被緩存,它的執行速度會更快,因此下次訪問時我不需要加載器。如何僅在第一次訪問網站時運行javascript

我以爲使用存儲信號緩存/餅乾這樣做,但我不知道如何?

這裏是裝載機的javascript:

function myFunction() { 
    var myVar = setTimeout(showPage, 1000); 
} 

function showPage() { 
    $("#loader_sec").css("display","none"); 
    $("#bodyloader").css("display","block"); 
} 

myFunction(); 

<div id="loader_sec"> 
    ... 
</div> 

我應該如何配置高速緩存/ cookies來推出這個代碼僅在第一次有人訪問?如果有更好的方法,請提出建議。

+0

[我以爲使用存儲信號緩存/餅乾這樣做,但我不知道如何?](https://duckduckgo.com/?q=javascript+read+and+write+cookies&t= h_&ia = qa) – Quentin

+0

您可以使用它的Cookie – Jer

回答

1

嘗試它希望它會工作

function myFunction() { 
    var myVar = setTimeout(showPage, 1000); 
} 

function showPage() { 
    $("#loader_sec").css("display","none"); 
    $("#bodyloader").css("display","block"); 
} 
if(!localStorage.getItem("visted")){ 
    myFunction(); 
    localStorage.setItem("visted",true); 
} 


<div id="loader_sec"> 
    ... 
</div> 
+0

JS可以工作,但這是一個問題,因爲一個myfunction();被禁用沒有什麼是把HTML的'顯示:無;'所以裝載程序正在運行,並沒有下車 – Lindow

0

您需要在用戶的設備上保留一些數據才能知道他們之前訪問過您的網站。你可以通過本地存儲或cookies來做到這一點。

下面是一個簡單的庫,你可以用它來讀/寫餅乾:https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework

你可以將值寫入當用戶已經顯示出的頁面加載器的cookie。當頁面加載時檢查這個值會讓你知道加載器是否已經顯示過,並告知你的決定是否應該顯示這次。

1

與會話/本地存儲嘗試。像這樣 -

 $(window).load(function() { 
      $(function() { 
       if (!sessionStorage.getItem("runOnce")) { 

        // Your code goes here.... 

        sessionStorage.setItem("runOnce", true); 
       } 
      }); 
     }); 
+0

該JS的作品,但它是一個問題,因爲當myfunction();被禁用沒有什麼是把HTML的'顯示:無;'所以裝載機正在運行,並沒有下車 – Lindow

0

我會做一個緩存/數據訪問層的邏輯。當另一個函數完成時,可以使用https://github.com/kriskowal/q作爲回調執行函數。

然後,你可以做

getData(key) 
    .then(function() { 
     hideLoader(); // Function for your show/hide logic 
    }); 

或類似的東西。

的getData看起來是這樣的:

var getData = function (key) { 
    var deferred = Q.defer(); 
    if (cache[key]) { 
     deferred.resolve(cache[key]); 
    } else { 
     //Data request logic that returns 'data' 
     deferred.resolve(data); 
    } 
    return deferred.promise; 
}; 

這樣,你不猜你的請求要去多久採取,你不會強迫第二長加載時間上的用戶,因爲該頁面會只要您的數據已被檢索,請立即加載。

順便說一句,這裏的緩存只是一個鍵/值存儲。又名var cache = {};

相關問題