使用微调器加载 Iframe

Question

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

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

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

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

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

如果有效请告诉我。

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

Answer 4

我只是想补充一下，另一种无需 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 索引（如果其他元素具有 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 上方（源已更改）并在加载时再次将微调器推到 iframe 后面（新内容可见）来实现的。

Answer 5

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

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

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

Answer 6

您可以在加载时使用jquery

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

Answer 7

2022 年答案

Iframe 有一个

onLoad

属性，您可以将其设置为函数

在反应中你可以做这样的事情：

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