ローダーがページ遷移するときに発生しないようにしたい

Question

前提・実現したいこと

四角形の黒い図形が回転するローダーを組んでいるんですが、別のページからトップページに飛ぶ時も毎回ローダーが出てきてしまいます。ページ遷移するときはローダーが出てこないようにする方法はないでしょうか。

該当のソースコード

    <div id="loader" class="loader active">
      <div class="loader-item"></div>
    </div>

@mixin animation (
    $name,
    $duration: 1s,
    $delay: 0s,
    $iteration-count: 1,
    $timing-function: ease,
    $direction: normal,
    $fill-mode: forwards
) {
    animation: {
        name: $name;
        duration: $duration;
        delay: $delay;
        iteration-count: $iteration-count;
        timing-function: $timing-function;
        direction: $direction;
        fill-mode: $fill-mode;
    }
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 30px;
    background: white;
    z-index: 100;
    opacity: 0;
    transition: .5s;
    perspective: 120px;
    perspective-origin: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
}

.loader.active {
    opacity: 1;
    visibility: visible;
}

.loader.active .loader-item {
    width: 50px;
    height: 50px;
    background:rgba(0, 0, 0);
    @include animation (
        $name: loaderSquare,
        $duration: 1s,
        $iteration-count: infinite,
        $timing-function: ease-in-out
    );
}

@keyframes loaderSquare {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotateX(-180deg);
    }
    100% {
        transform: rotateX(-180deg) rotateY(-180deg);
    }
}

  function loaderAnimation () {
    const loaderElement = document.querySelector('#loader');
    loaderElement.classList.remove('active');
}

window.addEventListener('DOMContentLoaded', function(){
    setTimeout(loaderAnimation, 2000)
},
{once: true});

試したこと

once: trueを使いましたが、何も変わりませんでした。

補足情報（FW/ツールのバージョンなど）

Macbook Air M1

Answer 1

domain.comの部分を動かしているサイトのドメインに設定してはいかがでしょうか

 function loaderAnimation () {
    const loaderElement = document.querySelector('#loader');
    loaderElement.classList.remove('active');
}

window.addEventListener('DOMContentLoaded', function(){
ref=document.referrer;
if ( ref.indexOf('domain.com') != -1) {
}else{
    setTimeout(loaderAnimation, 2000)
}
},
{once: true});

Comments

[valvalx]

別のページからトップページに飛ぶかどうかの判定は
ref=documen.referrer;でどこから飛んできたかを取得し、
if ( ref.indexOf('domain.com') != -1) {
//同一ドメインの別ページから来た場合の処理
}else{
//ドメイン外から来た場合
}
で別ページから来た場合の判定を行っています(refにdomain.comが含むか？という判定です)
ドメイン外(ブックマークや検索)から来た場合のみsetTimeout(loaderAnimation, 2000)を実行し、同一ドメイン内の別ページからきていた場合setTimeout(loaderAnimation, 2000)は実行されません
つまりサイトを開いて1度しかsetTimeout(loaderAnimation, 2000)が呼び出されることはありません

[amagiri]

詳しい解説ありがとうございました、大変勉強になりました！