CODEWITHSUNDEEP
javascripthtmljquerycss
november rain
november rain

Reputation: 1

How to make the loading page not show when going to the home page again (loading page code on the home page file)?

I had a loading page code on the homepage file, and I wanted the loading page not to show when I'm on another page back to the homepage.

I wanted to use the loader page when first opening the website and when refreshing the page (only on the home page, not on anything else like about or etc.), and I wanted the load page to not show when I clicked the home page (because of the load page code in the homepage file).

$(window).loader(function() {
  
    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">
</head>
<body>
    <div class="loader">
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="wave"></div>
        <div class="counterNumber"></div>
    </div>
    <nav>
        <ul class="nav-links">
            <li class="menu-item is-active">Home</li>
            <li class="menu-item"><a href="/article_n_others.html"> Article & Others,</a> </li>
            <li class="menu-item"><a href="/projects.html"> Projects,</a></li>
            <li class="menu-item"><a href="/contact_me.html"> Contact,</a></li>
            <li class="menu-item"><a href="/about.html"> About</a></li>
        </ul>
    </nav>
    <main class="hide">
        <section class="landing">
            <h1>Home Page</h1>
        </section>
    </main>
    <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>
</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 class="nav-links">
            <li class="menu-item is-active">Home</li>
            <li class="menu-item"><a href="/article_n_others.html"> Article & Others,</a> </li>
            <li class="menu-item"><a href="/projects.html"> Projects,</a></li>
            <li class="menu-item"><a href="/contact_me.html"> Contact,</a></li>
            <li class="menu-item"><a href="/about.html"> About</a></li>
        </ul>
    </nav>
    <main class="hide">
        <section class="landing">
            <h1>Another Page</h1>
        </section>
    </main>

</body>

Upvotes: 0

Views: 143

Answers (5)

Sepehr Amirkiaee
Sepehr Amirkiaee

Reputation: 134

Using document.referrer might be the solution.

The ‍‍‍‍‍‍document.referrer property returns the URI of the page that is linked to this page.

Check the referrer and based on it make your loader visible or not.

Upvotes: 0

r043v
r043v

Reputation: 1869

you may try add a get parameter to your home link, parse it on server side to add or not your load code or access window.location string from js part to show your loading thing or not

you also could use a fake form with a dedicated post parameter and submit it on click with your home link

but as other answers, use session or local storage is easier, set inside it a specific data on your link click and drop it after it's existence check to show load or not

Upvotes: 0

Alpesh Nakrani
Alpesh Nakrani

Reputation: 35

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

Upvotes: 1

Dinesh Uprety
Dinesh Uprety

Reputation: 3

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

Upvotes: 0

Layhout
Layhout

Reputation: 1580

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

Upvotes: 0

Related Questions