html - How to run javascript only the first time visiting a website - Stack Overflow

admin管理员组

文章数量:1398763

I'm using a page loader on the front page of my website, I'd like it to run only the first time someone visits my website, so later on since the page will be cached it'll execture faster and thus I won't need the loader the next times he visits.

I thought using storing a signal to caches/cookies to do so, but I have no idea how ?

here is the loader 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>

How should I configure caches/cookies to launch this code only the first time someone visits ? If there are better ways to do so please suggest.

I'm using a page loader on the front page of my website, I'd like it to run only the first time someone visits my website, so later on since the page will be cached it'll execture faster and thus I won't need the loader the next times he visits.

I thought using storing a signal to caches/cookies to do so, but I have no idea how ?

here is the loader 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>

How should I configure caches/cookies to launch this code only the first time someone visits ? If there are better ways to do so please suggest.

• javascript
• html

Share Improve this question Follow asked Feb 23, 2017 at 14:12 Horai NuriHorai Nuri 5,5881717 gold badges8484 silver badges136136 bronze badges 2

• I thought using storing a signal to caches/cookies to do so, but I have no idea how ? – Quentin Commented Feb 23, 2017 at 14:14
• You can use cookies for it – node_modules Commented Feb 23, 2017 at 14:15

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Try this:

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

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


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

Try with Session/local storage. Like this -

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

                    // Your code goes here....

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

You'll need to persist some data on the user's device in order to know that they have visited your site before. You would do this via local storage or cookies.

Here is a simple library you can use to read/write cookies: https://developer.mozilla/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework

You could write a value to a cookie when the user has been shown the page loader. A check for this value when the page loads will let you know if the loader has been displayed previously or not and inform your decision about whether it should be displayed this time.

I would do the logic in a caching/data access layer. You can use https://github./kriskowal/q for executing functions as a callback when another function pletes.

Then you can do

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

or something of the sort.

getData would look something like:

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

This way you're not guessing how long your requests are going to take and you're not forcing a second long load time on your user because the page will load as soon as your data has been retrieved.

By the way, the cache here is just a key/value store. Aka var cache = {};

本文标签： htmlHow to run javascript only the first time visiting a websiteStack Overflow