How to make the loading page website just once (home page) and not show when going to the home page-CodePudding

The loader is inside the home page, and I want the loader to run just once at first, which is when the sites open for the first time. When I am on another page and want to return to the home page, the loader runs again because the loader code is inside a homepage file.

How can I make the loader just open once at first without running again when I click to a home page on another page?

$(window).on('load', function() {
    const hide = document.querySelector('.hide');
    const hide2 = document.querySelector('main');
    const loader = document.querySelector('.loader');


    hide.classList.remove('hide');
    hide2.classList.remove('hide');
    $(".loader").animate({
        'top': '-100%'
    });
    setTimeout(removeLoader, 2000);
})

function removeLoader(){
    $( ".loader" ).fadeOut(500, function() {
      $( ".loader" ).remove(); 
}

.loader {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  transition: all 2s ease;
}

.wave {
  width: 10px;
  height: 200px;
  display: inline-block;
  background: linear-gradient(45deg, cyan, #fff);
  margin: 10px;
  animation: wave 1s linear infinite;
  border-radius: 20px;
}
.wave:nth-child(2) {
  animation-delay: 0.1s;
}
.wave:nth-child(3) {
  animation-delay: 0.2s;
}
.wave:nth-child(4) {
  animation-delay: 0.3s;
}
.wave:nth-child(5) {
  animation-delay: 0.4s;
}
.wave:nth-child(6) {
  animation-delay: 0.5s;
}
.wave:nth-child(7) {
  animation-delay: 0.6s;
}
.wave:nth-child(8) {
  animation-delay: 0.7s;
}
.wave:nth-child(9) {
  animation-delay: 0.8s;
}
.wave:nth-child(10) {
  animation-delay: 0.9s;
}
.wave:nth-child(11) {
  animation-delay: 1s;
}
.wave:nth-child(12) {
  animation-delay: 1.1s;
}
.wave:nth-child(13) {
  animation-delay: 1.2s;
}
.wave:nth-child(14) {
  animation-delay: 1.3s;
}
.wave:nth-child(15) {
  animation-delay: 1.4s;
}

HomePage:

<head>
<link rel="stylesheet" href="style.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script defer src="main.js"></script>

</head>
<body>
    <div >
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
    </div>
    <nav>
        <ul >
            <li >Home</li>
            <li ><a href="/article_n_others.html"> Article & Others,</a> </li>
            <li ><a href="/projects.html"> Projects,</a></li>
            <li ><a href="/contact_me.html"> Contact,</a></li>
            <li ><a href="/about.html"> About</a></li>
        </ul>
    </nav>
    <main >
        <section >
            <h1>Home Page</h1>
        </section>
    </main>

</body>

AnotherPage:

<head>
<link rel="stylesheet" href="style.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script defer src="main.js"></script>

</head>
<body>
    <nav>
        <ul >
            <li >Home</li>
            <li ><a href="/article_n_others.html"> Article & Others,</a> </li>
            <li ><a href="/projects.html"> Projects,</a></li>
            <li ><a href="/contact_me.html"> Contact,</a></li>
            <li ><a href="/about.html"> About</a></li>
        </ul>
    </nav>
    <main >
        <section >
            <h1>Another Page</h1>
        </section>
    </main>

</body>

CodePudding user response：

you just need to work along with localStorage or sessionStorage for it. Let's say you set have set initialLoad property inside localStorage and every time you just have to check for that property inside if condition and update display/ hide style property for loader.

 $( document ).ready(function() {
         if (localStorage.getItem("pageloadcount")) { 
             $("#landContainer").hide();
         } 
         localStorage.setItem("pageloadcount", "1");
 });

CodePudding user response：

use sessionStorage to save your loader state.

$(window).on('load', function() {
    if(sessionStorage.getItem("loader")) return;
    sessionStorage.setItem("loader", 1);

    const hide = document.querySelector('.hide');
    const hide2 = document.querySelector('main');
    const loader = document.querySelector('.loader');

    hide.classList.remove('hide');
    hide2.classList.remove('hide');
    $(".loader").animate({
        'top': '-100%'
    });
    setTimeout(removeLoader, 2000);
})

CodePudding user response：

You can achieve that by using $().one(); jQuery function.