预加载器在启动 HTML 站点之前加载所有资产答案

【问题标题】：Preloader load all assets before launching HTML Site预加载器在启动 HTML 站点之前加载所有资产
【发布时间】：2018-09-19 22:36:53
【问题描述】：

我目前正在创建一个简单的 HTML 页面。该页面包含图像、音频和背景视频。该页面非常大（总共 5-6 MB）。所以我想做一个预加载器来加载所有资产，然后启动 HTML 站点。我只发现动画预加载器会在一段时间后淡出 - 而不是在包含所有资产的完整内容准备好时。

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

这是我的代码 - 已删除所有不必要的代码（如元标记）。我已经准备好了一个 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>

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

非常感谢！

【问题讨论】：

使用 onload 在 body 标签上或在 jquery 中 #(window).load() 内淡出加载器
我会加载页面并在准备好/加载时用加载的视频替换图像。我不会从打开音频开始，因为这不是一件好事（对用户而言）。预加载器对 SEO 和转换也不是很好。还想做吗？请注意，onload 处理程序有不触发的风险（因为可能出现 404）。固定的秒数更安全。
@JoostS 感谢您的建议！我想在这种情况下我不想再那样做了。我要试试你的解决方案。我正在考虑在 9gag 或 facebook 上制作一个用于自动静音的按钮。

标签： javascript jquery html css preloader

【解决方案1】：

预加载器的 Javascript 如下所示：

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

  });
});

【讨论】：

@Lenonid Volkov：非常感谢！
嘿 Leonid，我只是在玩这个，但问题仍然是：视频需要很多时间来缓冲。页面显示，视频仍需要完全加载。我希望预加载器在视频完全缓冲后消失。知道如何在 jQuery 中执行此事件处理程序吗？