在加载 window 的所有内容之后但在 iframe 完成加载之前删除加载屏幕和微调器

Question

我正在使用带有微调器的加载屏幕，该微调器会在 window 中的所有内容加载之前显示。它在所有页面上运行良好，window 在内容较少的网页上加载速度非常快，但在我的一个页面上，我正在加载许多嵌入了 youtube 视频的 iframe。 $(window).on('load', function(){}); 在加载所有内容（包括 iframe）之前不会触发。这意味着加载需要很长时间，并且在浏览器加载完 HTML、CSS、JS 和所有图像后很长时间才会显示带有微调器的加载屏幕。我想在 HTML、CSS、JS 和所有图像加载后对 iframe 使用框架加载以减少感知加载时间。有没有办法告诉 window 的其余部分已完全加载但 iframe 仍在加载？这就是我目前正在做的用微调器删除加载屏幕的操作：

<html>
<head>
</head>
<div class="spinner-wrapper">
  <div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
</div>
<body>
 {% for video in range(videos|length) %}
   <iframe class="yvideo" src="{{ "https://www.youtube.com/embed/%s" + videos[video]}.get("url") }}"></iframe>
 {% endfor %}
 <script type=module src="{{ url_for('static', filename='js/video.js') }}"></script>
</body>
</html>

videos.js:

$(window).on('load', function() {
    preloaderFadeOutTime = 300;
    function hidePreloader() {
    var preloader = $('.spinner-wrapper');
        preloader.fadeOut(preloaderFadeOutTime);
    }
    hidePreloader();
});

Answer 1

有多种方法可以解决这个问题：

一种简单的方法是最初将 iframe 源保持为空，然后在 window.load 时动态设置 iframe 源。

此处示例代码：

 <script>
    $(window).on('load', function() {

        document.getElementById('myIframe').src = "your URL";
        document.getElementById('myIframe2').src = "your URL";

       preloaderFadeOutTime = 300;
       function hidePreloader() {
         var preloader = $('.spinner-wrapper');
         preloader.fadeOut(preloaderFadeOutTime);
       }
       hidePreloader();
    });
  </script>

  <iframe id="myIframe"  src="" ></iframe>
  <iframe id="myIframe2"  src="" ></iframe>

编辑：
如果您不能更改 video.js 文件但可以创建自己的 js 文件，该文件可以与页面上的 html 交互，那么在您的自定义 js 文件中执行以下操作：

//your external js
// first get collection of your iframes by class
 var listOfIframes = document.getElementsByClassName("yvideo");
 for (let item of listOfIframes) {
            item.src = "";  // set them to empty.
        }
 window.addEventListener("load", function() { 

//once page is loaded then populate the source with your json file. 


 for (let item of listOfIframes) {
            item.src = "URLs from JSON";  
        }

 });

第二种方法：

而不是仅在 window.load 调用 hidePreloader()。您还可以检查页面中的其余项目是否已加载。一旦加载完毕，您就可以调用 hidePreloader()

在加载 window 的所有内容之后但在 iframe 完成加载之前删除加载屏幕和微调器

Removing loading screen and spinner after all contents of the window have loaded but before iframes have finished loading

iframe

window

loading

jinja2

flask

第二种方法：