我如何在我的页面上显示 gif 预加载器，直到背景视频加载答案

【问题标题】：How Do i display A gif preloader on my page until the background video loads我如何在我的页面上显示 gif 预加载器，直到背景视频加载
【发布时间】：2022-09-29 00:10:04
【问题描述】：

我有一个 gif，在我的网站正在加载时出现，但是 gif 消失了，并且页面在所有内容都加载后出现，除了背景视频。

只有在背景图像加载后，我才能让 gif 消失。我对javascript相当陌生，所以我想要一个关于如何做到这一点的指导代码

这是我目前使用的代码

//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>

标签： javascript html jquery css

【解决方案1】：

我不确定这是否能回答您的问题，但您可以尝试使用此代码。我添加了一个适用于 jQuery3 的脚本。
它将等到窗口完成加载，然后再等待几秒钟（可选）。

$(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>

【讨论】：