加载第 3 方 iframe 时如何删除加载 gif

【问题标题】：How to remove a loading gif when 3rd party iframe is loaded加载第 3 方 iframe 时如何删除加载 gif
【发布时间】：2016-01-05 08:46:28
【问题描述】：

我有以下代码在等待第 3 方 iframe 时显示和隐藏正在加载的 GIF：

HTML

<div id="waitmessage" class="hide"><img src="/static/images/global/wait.gif"/></div>

jQuery

$('.iframe').ready(function () {
    $('#button').click(function() {
        $('#waitmessage').removeClass('hide');
            alert('skywalker');
        });
    });
    $('.iframe').load(function () {
    $('#waitmessage').remove();
});

但当 iframe 加载时，gif 仍在后台加载。顺便说一句，iframe 是主页上的叠加层。

【问题讨论】：

标签： javascript jquery html iframe

【解决方案1】：

不知何故，您正在等待 .iframe 准备好并且选择器没有触发此类事件，假设选择器返回 null 是因为 DOM 尚未加载。因此，.ready 事件处理程序中的任何内容都不会被执行。等待 DOM 加载的正确方法是使用预定义变量 document。试试这个。

$(function() {
    $('#console').text( $('#console').text()+"\r\n"+'DOM is ready');
    $('#yt').on('load', function(){
       console.log('YouTube loaded');
       $('#console').text( $('#console').text()+"\r\n"+'YouTube loaded');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="console"></pre>
<iframe id="yt" width="560" height="315" src="https://www.youtube.com/embed/AhhEYe5Hczo" frameborder="0" allowfullscreen></iframe>

【讨论】：