【问题标题】：Load Iframe with spinner使用微调器加载 iframe
【发布时间】：2023-03-12 04:19:01
【问题描述】：

此代码正确加载微调器，但加载完成后如何隐藏它？

iframe {
    background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");   
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

【问题讨论】：

你需要javascript。带有$( document ).ready() 的jQuery
更正 - 此代码在 iframe 的背景中附加加载图像，它不会“加载”微调器。您需要将微调器与 iframe 分开，然后使用 JS，真正加载并删除它

标签： javascript jquery iframe

【解决方案1】：

作为替代解决方案，您也可以这样做：

    <div id="spinner">
        <div>
             <img src="http://www.ajaxload.info/images/exemples/25.gif" />    
        </div>
    </div>
    <iframe border=0 name=iframe src="http://www.w3schools.com" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('spinner').style.display='none';"></iframe>

将微调器的绝对位置设置为页面容器以使其适当居中

【讨论】：

【解决方案2】：

试试 jQuery：

 $( document ).ready(function() {
    $( "iframe .load" ).hide();
  });

并为加载操作创建第二个 css 类：

    .load{
            background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");   
            background-repeat: no-repeat;
            background-position: 50% 50%;
            position: absolute;
            width:100%;
            height:100%;
        }

iframe{
         position:relative;
        }

让我知道它是否有效。

【讨论】：

【解决方案3】：

在这里，使用 font-awesome 和 jQuery：

$(document).ready(function () {
    showSpinnerWhileIFrameLoads();
});

function showSpinnerWhileIFrameLoads() {
    var iframe = $('iframe');
    if (iframe.length) {
        $(iframe).before('<div id=\'spinner\'><i class=\'fa fa-spinner fa-spin fa-3x fa-fw\'></i></div>');
        $(iframe).on('load', function() {
            document.getElementById('spinner').style.display='none';
        });
    }
}

【讨论】：

【解决方案4】：

您可以在 iframe 加载时进行监听，然后在 iframe 上放置一个类，将背景图像设置为空。

iframe.onload = function() { 
   // remove spinner
};

抱歉，我的回答很简短，但我正在使用电话自动取款机 :)

【讨论】：

【解决方案5】：

我只是想补充一点，不使用 Javascript 的另一种方法是让微调器出现在 iframe 后面，并为 iframe 提供最初透明的背景；只要iframe 的内容有背景颜色，它就会在加载后覆盖微调器。

如果您的 iframe 是“一次性”的，这是一个很好的方法，即它只加载一次嵌入的内容并且不包含可点击的链接，或者如果您不关心在初始内容后显示微调器已加载。*

有两种简单的方法可以做到这一点：

CSS 背景

HTML：

<div class="iframe_container">
    <iframe src="http://example.org"></iframe>
</div>

CSS：

.iframe_container {
    background-image: url('path/to/spinner.gif');
    background-position: center;
    background-repeat: no-repeat;
}
.iframe_container iframe {
    background: transparent;
}

基本上，微调器是.image_container 的背景，位于中心，并且可见，因为 iframe 的背景最初是透明的。当 iframe 内容加载时，它会覆盖图像，即使发生错误也是如此。

Z-索引

HTML：

<div class="iframe_container">
    <img class="spinner" src="path/to/spinner.gif" />
    <iframe src="http://www.example.org"></iframe>
</div>

CSS：

.iframe_container {
    position: relative;
}
.iframe_container .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
}
.iframe_container iframe {
    background: transparent;
    z-index: 1;
}

在这种情况下，我们将微调器嵌入为特定元素（您可能需要为 Bootstrap 微调器等执行此操作），使用 CSS 定位。在这种情况下，iframe 覆盖了图像，因为它被赋予了 z-index（如果其他元素具有 z-indexes，您可能需要使用更大的数字），但技巧基本相同。

注意事项

只要微调器在技术上仍然在后台不会打扰您，这对于单个页面加载 iframe 或当您只关心第一次加载时非常有用。

如果您希望您的网站支持禁用 Javascript 的用户，这也是一个很好的技巧，因为他们不会留下不会消失的微调器。

*如果您想通过 Javascript 重新使用微调器，您仍然可以使用 z-index 选项，通过将微调器的 z-index 设置为高于 iframe 的 z-index，如下所示：

var e = getElementById('my_iframe');
e.onload = function() {
    var e = getElementById('my_spinner');
    e.style.zIndex = 0;
}
e.onunload = function() {
    var e = getElementById('my_spinner');
    e.style.zIndex = 100;
}

卸载时将微调器推到 iframe 上方（源已更改）并在加载时再次推到 iframe 后面（新内容可见）。

【讨论】：

甜，喜欢没有 JavaScript 选项。非常适合静态 Readme.html 文件。

【解决方案6】：

您可以在加载时使用 jquery

$('#showFrame').on("load", function () {
    console.log('iframe loaded completely'); //replace with code to hide loader
});

【讨论】：