How Do i display A gif preloader on my page until the background video loads

EditByDenzel 0
Viewed 21

I have a gif that appears as my site is loading however the gif disappears and the page appears after everything has loaded except the background videos.

How could I have the gif fade away only after the background images have loaded. I am fairly new to javascript so i'd like a guided code on how to do this please

Here's the code i currently use

//preloader 

  var loader = document.querySelector(".loader")

  window.onload.addEventListener("load", vanish)
   
  function vanish() {
    loader.classList.add("dissapear")
  }
 .loader {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 4;
   background-color: #36395A;
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .dissapear {
    animation: vanish 1s forwards;
 }

 @keyframes vanish {
   100% {
    opacity: 0;
    visibility: hidden;
   }  
 }
   <div class="loader">
    <img src="https://catulu.club/images/ch1-img.159861e81e6dc4bfca11.gif" alt="">
   </div>

jquery javascript css html
1 Answers

I am not sure if this answers your question, but you could try using this code. I added a script that works with jQuery3. It will wait until the window finishes loading, then it will wait an optional extra few seconds.

$(window).on('load', function() {
  setTimeout(removeLoader, 3000); //wait for page load PLUS three seconds.
});

function removeLoader() {
  $("#loading").fadeOut(500, function() {
    // fadeOut complete. Remove the loading div
    $("#loading").remove(); //makes page more lightweight 
  });
}
#loading {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 100;
  background-color: #36395A;
  z-index: 4;
}

#loading-image {
  z-index: 4;
}

#loadingDiv {
  position: absolute;
  ;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #36395A;
}
<div id="loading">
  <img id="loading-image" src="https://catulu.club/images/ch1-img.159861e81e6dc4bfca11.gif" alt="Loading..." />
</div>
<body>
<txt> hello world, testing testing </text>
</body>

<!--- Place script below at the bottom of the body --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

anz0
Related