时间戳

首页 > 解决方案 > 在窗口的所有内容已加载但 iframe 完成加载之前删除加载屏幕和微调器

flask - 在窗口的所有内容已加载但 iframe 完成加载之前删除加载屏幕和微调器

问题描述

我正在使用带有微调器的加载屏幕，该微调器在加载窗口中的所有内容之前显示。它适用于所有页面，并且窗口在内容较少的网页上加载速度非常快，但在我的一个页面上，我正在加载许多嵌入 youtube 视频的 iframe。$(window).on('load', function(){});在加载所有内容（包括 iframe）之前不会触发。这意味着加载需要很长时间，并且在浏览器完成 HTML、CSS、JS 和所有图像的加载后很长时间才会显示带有微调器的加载屏幕。我想在加载 HTML、CSS、JS 和所有图像之后对 iframe 使用骨架加载，以减少感知加载时间。有没有办法告诉窗口的其余部分已完全加载但 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>

视频.js：

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

标签： flaskiframewindowjinja2loading

解决方案

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

一种简单的方法可以是最初将 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()

推荐阅读