How to show preloader except when navigate between pages?-CodePudding

The preloader/loading page is a whole page div with an image inside it. It works as an introduction page for my website. I would like this preloader/loading page is displayed only under certain conditions and to fadeOut only if is clicked.

The conditions for the preloader/loading page appear:

the first time the user enters the website,
the user closes the tab and opens another one,
the user is already on the site and refreshes the page,
the user paste website url in a empty page.

When the preloader/loading page should NOT appear:

I am already on the website and I change from one page to another

Is it possible create a preloader with those conditions? If it is, how can I show my preloader except when navigate between pages?

This is my code:

HTML

<center id="splashscreen">
    <img id="splashcontent" src="https://www.w3schools.com/html/pic_trulli.jpg">
</center>

CSS

#splashscreen {
    background-color: white;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 998;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
}
#splashscreen.show {
    visibility: visible;
    opacity: 1;
}
#splashcontent {
    max-width: 400px;
    width: 100%;
    height: auto;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

First attempt (problem: obviously the preloader does not appear at refresh):

JQUERY

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    function Preloader() {
    var preloader = $("#splashscreen");
    preloader.addClass('show');
    $('html, body').css({ 'overflow': 'hidden' })
    $("#splashscreen").click(function(){
    $(this).fadeOut(500);
    $('html, body').css({ 'overflow': 'auto' })
    });
    }
    if (!sessionStorage.getItem('doNotShow')) {
    sessionStorage.setItem('doNotShow', true);
    Preloader();
    } else {
    $("#splashscreen").remove();
    }
});
</script>

Second attempt (problem: the click function of the links does not work):

JQUERY

<script type="text/javascript">
$(document).ready(function() {
    var preloader = $("#splashscreen");
    preloader.addClass('show');
    $('html, body').css({ 'overflow': 'hidden' })
    $("#splashscreen").click(function(){
    $(this).fadeOut(500);
    $('html, body').css({ 'overflow': 'auto' })
    });
    $("a").click(function(){
    $("#splashscreen").hide();
    });
});  
</script>

CodePudding user response：

Add event listener on all links to different pages. In that listener, use sessionStorage or localStorage to store url of the link.

When page loaded, check for data in the sessionStorage, if it's present and matches current url and history.length is larger then 1, don't use preloader page. Delete data from sessionStorage so it won't be used again if page refreshed.

Here is an example

let status = "page opened for the first time, refreshed or opened in a new window/tab";

const storageName = "clickedLink";
const storageData = JSON.parse(sessionStorage.getItem(storageName));
if (storageData !== null)
{
  if (storageData.url == location.href && history.length != 1)
  {
    status = "new page loaded";
  }
  else
  {
    status = "page refreshed or expired";
  }

  sessionStorage.removeItem(storageName);
}

document.body.addEventListener("click", onClickPage);

function onClickPage(e)
{
  const el = e.target;
  //because we are listening clicks on body, make sure we process only <a href=...> elements
  if (el.tagName != "A" || el.href.match(/#reload$/))
    return;

  //store information about the click
  sessionStorage.setItem(storageName, JSON.stringify({
    url: el.href,
    dateClicked: new Date()
  }));
}

https://jsfiddle.net/ybhnz5x9