在 iframe 加载时隐藏加载程序答案

【问题标题】：Hide loader on iframe load在 iframe 加载时隐藏加载程序
【发布时间】：2019-08-22 03:10:48
【问题描述】：

我需要在 iframe 加载时隐藏加载器，当它再次重新加载时也会显示

<div id="loader" class="holds-the-iframe"><iframe id="frame" src="http://www.test.com" frameborder="0" ></iframe></div>


<style>
.holds-the-iframe {
  background:url(https://i.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.webp) center center no-repeat;
}

</style>

解决此问题的最佳方法是什么？我知道它可以用 jquery 制作，但我更喜欢纯 javascript 解决方案。

【问题讨论】：

您是否尝试过从 iframe 触发的 onload 函数？
$(document).load(function()?如何专门检查 iframe？
document.getElementById('frame').onEventListener('load', function(){}) 这可能会起作用。

标签： javascript jquery html css iframe

【解决方案1】：

试试这个代码..我没有放图片..我只是用word..你可以把它改成图片。

HTML

<iframe src="https://www.test.com/" id="foo"></iframe>
<div id="loadingMessage">Loading...</div>

CSS

#loadingMessage {
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #ccc;
    top: 0px;
    left; 0px;
    position: absolute;
}

Javascript

$('#foo').ready(function () {
    $('#loadingMessage').css('display', 'none');
});
$('#foo').load(function () {
    $('#loadingMessage').css('display', 'none');
});

希望能帮到你。

【讨论】：

但是为什么不使用图片呢？