javascript - 在 iframe 加载时隐藏加载器

Question

我需要在 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 解决方案。

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

希望能帮到你。