我有以下代码来在等待第 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 是主页上的覆盖层。
最佳答案
不知何故,您正在等待 .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>
关于javascript - 如何在加载第 3 方 iframe 时删除加载 gif,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34607450/