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

<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>

设置微调器相对于页面容器的绝对位置的样式，使其适当居中

试试jQuery：

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

并为loading-action创建第二个css-class：

.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;
        }

如果成功了告诉我。

使用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';
        });
    }
}

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

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

很抱歉我的回答很简短，但我在电话ATM机上：）

我只是想补充一下，另一种不用Javascript的方法是让微调器出现在iframe后面，并给予iframe一个最初透明的背景;只要iframe的内容具有背景颜色，则一旦加载它，它将覆盖微调器。
如果你的iframe是“单次使用”的，这是一个很好的方法，即它只加载一次嵌入的内容，并且不包含可点击的链接，或者如果你不关心在初始内容加载后显示微调器。
有两种简单的方法可以做到这一点：

CSS背景

超文本标记语言：

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

中央支助组：

.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索引

超文本标记语言：

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

中央支助组：

.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索引（如果其他元素具有z索引，您可能需要使用更大的数字），但技巧基本上是相同的。

注解

只要微调器在技术上仍然在后台，这对单个页面加载的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上方（源代码被更改），并在加载时再次推到它后面（新内容可见）来实现的。

可以在load上使用jquery

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

2022答案

Iframes有一个onLoad属性，您可以将其设置为函数
在react中，你可以这样做：

const spinner = async () => {
            document.getElementById('spinner').style.display = 'none';
    }

在模式中渲染为：

<div

    id="spinner"
      style={{
      backgroundColor: '#ECECFE',
      borderRadius: '8px',
      padding: '20px',
    }}
    >
    <Loading
      spinnerColor="#2E7DAF"
      text="Loading...."
    />
       </div>
        <iframe id="iframeid" src="" width="650px" height="650px" onLoad={spinner} ></iframe>
    </div >