Question

我当前正在创建一个简单的HTML页面。该页面包含图像，音频和背景视频。页面很大（总共5-6 MB）。因此，我想做一个预加载器，加载所有资产，然后启动HTML站点。我只发现动画预加载器会在一段时间后消失，而不是在所有资产的全部内容准备就绪时消失。

您知道这种预加载器的Java脚本是什么样的吗？

这是我的代码-不需要删除所有内容（例如meta标签）。我已经准备好CSS和JS文件：

#backgroundvideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/css/master.css">
    <link rel="script" href="/js/preloader.js">
  </head>

  <body>
    
    <!-- Video -->
    <video autoplay muted loop id="backgroundvideo">
      <source src="/media/joetnar-backgroundvideo.mp4" type="video/mp4">
    </video>

    <!-- Logo -->
    <div class="content">
      <img src="/media/joetnar-logo-200.png" alt="JOETNAR Logo" title="JOETNAR Logo">
    </div>

    <!-- Audio -->
    <iframe src="/media/joetnar-intro.mp3" allow="autoplay" style="display:none" id="iframeAudio">
    </iframe>

  </body>

</html>

由于新的Google“无音频自动播放”政策，因此通过iframe加载了音频。这是一个轻松的解决方法，因为iframe仍然可以自动启动。

非常感谢！

Answer 1

预加载器的Javascript如下：

jQuery(document).ready(function($) {
  $(window).load(function() {
    setTimeout(function() {
      $('#preloader').fadeOut('slow', function() {});
    }, 2000);

  });
});

预加载器在启动HTML网站之前加载所有资产

1 个答案: