javascriptのonloadを一回だけ実行したい。。。

javascript初心者です。

下記のコードを１回だけ実行したいのですが、

どのように設定したら良いのか？わからないです。。。。

ご指導よろしくお願いいたいます。

$(window).on('load',function(){
$("#splash-logo").delay(2000).fadeOut('slow');
$("#splash").delay(2000).fadeOut('slow',function(){
$('body').addClass('appear');
});

maisumakun

2021/08/30 00:06

・現状ではどのような動作をしているのですか？・そのコードは、どんなファイルの、どの部分に書きましたか？

退会済みユーザー

2021/08/30 00:30

リロードされると再び実行されるがそれを避けたいということですか？

furan200

2021/08/30 00:57 編集

抜粋だけしてしまいすいません。うまくお伝えてできているか？心配ですが、 local環境(manp)でwordpressを入れてやっています。 jsは別ファイルを作り、</body>の一つ上に <script src="<?php bloginfo("template_url");?>/4-2-5/4-2-5.js"></script> を記載しています。私が困っているのは、htmlの<a>をクリックするたびに onloadされてしまう事です。 ↓下記がheader.phpに記載した<header>部分です。 <header class='header_pc'> <div class='topArea'> <div class='top_area_inner'> <p class='current'> </p> <ul class='menu'> <li> <a href=""></a> </li> <li> <a href=""></a> </li> <li> <a href=""></a> </li> <li> <a href=""></a> </li> </ul> </div> </div> <div class='header_middle'> <div class='header_middle_inner'> <h1 class='header_middle_left'> <a href="./"> <picture> <source media="(min-width: 481px)" srcset="<?php bloginfo("template_url");?>/images/common/laughtell_logo.jpg" alt=""> <source media="(max-width: 480px)" srcset="<?php bloginfo("template_url");?>/images/common/laughtell_logo.jpg" alt=""> <img src="<?php bloginfo("template_url");?>/images/common/laughtell_logo.jpg" alt=""> </picture> </a> </h1> <div class='mainArea_right'> <div class='mainArea_inner'> <div class='phone'> <a href=""><img src="" alt=""></a> </div> <div class='target_btn_red' > <a href=""><span></span></a> </div> <div class='target_btn_blue'> <a href="" ><span></span></a> </div> <div class='target_btn_green'> <a href=""><span></span></a> </div> </div> </div> </div> </div> </header> <nav> <div class='header_bottom'> <div class='header_bottom_inner'> <div class="nav1"> <a href="<?php echo home_url('./')?>"></a> </div> <div class="nav2"> <a href="<?php echo home_url('/consultation')?>" target="_blank"></a> </div> <div class="nav3"> <a href="<?php echo home_url('/company')?>" target="_blank"></a> </div> <div class="nav4"> <a href="<?php echo home_url('/qa')?>" target="_blank"></a> </div> <div class="nav5"> <a href="<?php echo home_url('#test')?>" target="_blank"></a> </div> <div class="nav6"> <a href="<?php echo home_url('/corporation')?>" target="_blank"></a> </div> <div class="nav8"> <a href="<?php echo home_url('/#insurance')?>" target="_blank"></a> </div> </div> </div> </div> </nav> <div id="splash"> <div id="splash-logo"> <p class='scroll_title'></p> <p class='scroll_title'><span></span></p> </div> </div> <div class="splashbg1"></div> <div class="splashbg2"></div>  <div id="container"> うまく説明できてなければ申し訳ありません。よろしくお願いします。ユーザーがサイトに訪問した時にだけ実行したいです。 cssは下記のようになっています。 /*========= ローディング画面のためのCSS ===============*/ #splash { position: fixed; width: 100%; height: 100%; background:#ffe220; z-index: 9999999; text-align:center; color:#fff; top:0; } #splash-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /*========= 画面遷移のためのCSS ===============*/ body{ background:white; /*遷移アニメーションと同じ色を指定*/ } body.appear{ background:#fff;/*画面を開いた後の背景色を指定*/ } /*画面遷移アニメーション*/ .splashbg1,.splashbg2{ display: none; } /*bodyにappearクラスがついたら出現*/ body.appear .splashbg1,body.appear .splashbg2{ display:block; } /*上に消えるエリア*/ body.appear .splashbg1{ animation-name:PageAnime; animation-duration:1.0s; animation-timing-function:ease-in-out; animation-fill-mode:forwards; content: ""; position:fixed; z-index: 999; width: 100%; height: 100vh; bottom:50%; left:0; transform: scaleY(1); background-color:#ffe220;/*伸びる背景色の設定*/ } @keyframes PageAnime{ 0% { transform-origin:top; transform:scaleY(1); } 100% { transform-origin:top; transform:scaleY(0); } } /*下に消えるエリア*/ body.appear .splashbg2{ animation-name:PageAnime2; animation-duration:1.0s; animation-timing-function:ease-in-out; animation-fill-mode:forwards; content: ""; position:fixed; z-index: 999; width: 100%; height: 100vh; top: 50%; left:0; transform: scaleY(1); background-color: #ffe220;/*伸びる背景色の設定*/ } @keyframes PageAnime2{ 0% { transform-origin:bottom; transform:scaleY(1); } 100% { transform-origin:bottom; transform:scaleY(0); } } /*画面遷移の後現れるコンテンツ設定*/ #container{ opacity:1; /*はじめは透過0に*/ } /*bodyにappearクラスがついたら出現*/ body.appear #container{ animation-name:PageAnimeAppear; animation-duration:1s; animation-delay:0.2s; animation-fill-mode:forwards; opacity: 0; } @keyframes PageAnimeAppear{ 0% { opacity: 0; } 100% { opacity: 1; } } /* ローディングエリアのタイトルスクリプト */ .scroll_title { opacity: 0; color:rgb(100, 98, 98); font-size: 30px; margin-bottom:50px; font-weight: 700; font-family: fot-tsukuardgothic-std; } .scroll_title>span{ font-size: 20px;