CSS背景

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();
  });

并为loading-action创建第二个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

我只是想补充一下，没有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的用户，因为这不会给他们留下不会消失的微调框，这也是一个好技巧。

**如果您想通过Java脚本重复使用微调器，仍然可以使用z-index选项，方法是将微调器的z-index设置为高于iframe，例如：

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上方，并在加载时再次将微调器推到其后方（可见新内容）来实现的。

Answer 4

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

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

对不起，简短的回答，但我正在打电话atm：）

Answer 5

在这里，使用真棒字体和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 6

您可以在加载时使用jquery

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

使用微调器加载iframe

6 个答案:

CSS背景

Z索引

注释