What can i change on my Function to avoid the delay before the Pageloader comes up?-CodePudding

I created a small pageloader including a function to check if you have been on the page before (sessionStorage).

Otherwise the Pageloader will not be shown, i did that in case you navigate from an internal page to the "home" page the loader will not be shown every single time again, but now all of a sudden there is like a few ms delay before the laoder comes up.

Code:

<style>
#loader {
    visibility:hidden;
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100%;
  background-color: white;
  animation-name: loadinganimation;
  animation: loadinganimation 1s;
  animation-iteration-count: 3;
  font: 100px helvetica, bold;
  color:#F5FF00;
  display:block;
  margin:auto;
}
@keyframes loadinganimation {
    0%,49%  {
        background-color: white;
       
    }

    50%,100%  {
        background-color: black;
      
    }
}
  #letterMD{
     position: absolute;
     margin-left: 33%;
     margin-top: 7.5%;
}
#letterAI{
    position: absolute;
    margin-top: 7.5%;
    margin-left: 63%
}
#I{
  margin-top: 42vh;
  margin-left: 1vh;
}
#D{
margin-top: 42vh;
}
  
  @media (max-width: 500px) {

    #letterAI {
    position: absolute;
    margin-top: 57%;
    margin-left: 80%
       }
    
  #letterMD{
     position: absolute;
     margin-left: 5%;
     margin-top: 57%;
}
    
  #I{
  margin-top: 20vh;
  margin-left: 1vh;
}
#D{
margin-top:20vh;
}

}
</style>
<body onl oad="myFunction()">
<script>
var loadinganimation;

function myFunction() {
  loadinganimation = setTimeout(showPage, 3000);
}
function showPage() {
  document.getElementById('loader').style.display = 'none';
}
    
    jQuery(window).load(function() {
  if (sessionStorage.getItem('dontLoad') == null)
    {
      document.getElementById('loader').style.visibility = 'visible';   
      sessionStorage.setItem('dontLoad', 'true');
    }
    
});
    
</script>
<div id="loader">
<div1 id="letterMD"><p id="M">M</p><p id="D">D</p></div1>
<div2 id="letterAI"><p id="A">A</p>
<p id="I">I</p></div2>
</div>
</body>

CodePudding user response：

You are using onload="myFunction()" and jQuery(window).load(). Both of these are going to wait for the page to be loaded (and possibly displayed). With your current code, you need this because you try to select the loader. But you can avoid this.

Here is a possible solution:

Add a CSS style targetting #loader inside .page-loading to show it
Add that .page-loading to the parent HTML element if necessary
Remove it after 3 seconds

With this, you don't need the DOM to be ready, you can execute this code right from the head section, before anything renders:

<html>
<head>
  <style>
    /* ...your styles..   this: */
    .page-loading #loader { visibility: visible; }
  </style>
  <script>
    if (sessionStorage.getItem('dontLoad') == null) {
      sessionStorage.setItem('dontLoad', 'true');
      document.documentElement.classList.add('page-loading');
      setTimeout(function() {
        document.documentElement.classList.remove('page-loading');
      }, 3000);
    }
  </script>
  </head>
  <body>
    <div id="loader"></div>
  </body>
</html>

CodePudding user response：

Unfortunately it doesnt work :(

<style>
  #loader {
  visibility:hidden;
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100%;
  background-color: white;
  animation-name: loadinganimation;
  animation: loadinganimation 1s;
  animation-iteration-count: 3;
  font: 100px helvetica, bold;
  color:#F5FF00;
  display:block;
  margin:auto;
}
@keyframes loadinganimation {
    0%,49%  {
        background-color: white;
       
    }

    50%,100%  {
        background-color: black;
      
    }
}
  #letterMD{
     position: absolute;
     margin-left: 33%;
     margin-top: 7.5%;
}
#letterAI{
    position: absolute;
    margin-top: 7.5%;
    margin-left: 63%
}
#I{
  margin-top: 42vh;
  margin-left: 1vh;
}
#D{
margin-top: 42vh;
}

#loader { visibility: visible; }
  
@media (max-width: 500px) {
    #letterAI {
    position: absolute;
    margin-top: 57%;
    margin-left: 80%
       }
    
  #letterMD{
     position: absolute;
     margin-left: 5%;
     margin-top: 57%;
}
    
  #I{
  margin-top: 20vh;
  margin-left: 1vh;
}
#D{
margin-top:20vh;
}

}
    .page-loading #loader { visibility: visible; }
</style>
<script>
    if (sessionStorage.getItem('dontLoad') == null) {
      sessionStorage.setItem('dontLoad', 'true');
      document.documentElement.classList.add('page-loading');
      setTimeout(function() {
        document.documentElement.classList.remove('page-loading');
      }, 3000);
    }
</script>
<body>
<div id="loader">
<div1 id="letterMD">
<p id="M">M</p>
<p id="D">D</p>
</div1>
<div2 id="letterAI">
<p id="A">A</p>
<p id="I">I</p>
</div2>
</div>
</body>