我正在使用带有微调器的加载屏幕，该屏幕在加载窗口中的所有内容之前显示。它在所有页面上都能正常工作，并且窗口在内容较少的网页上加载速度非常快，但在我的其中一个页面上，我正在加载嵌入youtube视频的许多iframe。直到所有内容（包括iframe）都已加载，$(window).on('load', function(){});才会触发。这意味着加载需要很长时间，并且在浏览器完成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 %}
</body>
</html>
videos.js：
$(window).on('load', function() {
preloaderFadeOutTime = 300;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
可以通过多种方式解决此问题：