隐藏iframe直到它完全加载
我想隐藏iframe直到它被加载以避免发生白色闪烁。 它始终发生在Internet Explorer 11和FireFox上有时在Chrome上如果页面加载速度较慢。隐藏iframe直到它完全加载
HTML
<div class="test">
<div class="hover">hover me</div>
<div class="cool">cool</div>
</div>
CSS
body { background-color: black; }
.hover { border: solid red; height: 40px; width: 40px; z-index: 1; color: white; }
iframe {position: relative; left: 40px; }
.test { border: solid blue; position: absolute; height: 300px; width: 500px; z-index: 3; }
.cool { border: solid purple; background-color: black; }
jQuery的
$(document).ready(function(){
$(".hover").on({
mouseover: function(){
$(this).next('.cool').html('<iframe width="370" height="215" src="//tsn.com" frameborder="0" ></iframe>');
}
});
});
$(document).ready(function() {
$('.test').hover(function() {
}, function() {
$('.cool').html('');
});
});
编辑,更新
尝试(V4)
$.fx.interval = -1000;
$(document).ready(function() {
var frame = $('<iframe></iframe>', {
width: "370",
height: "215",
src: "//tsn.com",
frameborder: "0",
style: "display:none;"
});
frame.on("load", function (e) {
$(e.target)
.fadeIn(1000, "linear");
});
$(".hover").on({
mouseover: function() {
$('.cool').append(frame)
}
});
});
$(document).ready(function() {
$('.test').hover(function() {
//
}, function() {
$('.cool iframe').detach();
});
});
的jsfiddle http://jsfiddle.net/LaL9nkup/60/
谢谢,但我不希望iframe的东西加载我的网页,我只希望它被调用时加载。 – 2014-12-06 16:31:22
@Newbie查看更新后的帖子。谢谢 – guest271314 2014-12-06 16:39:17
fiddle#50,它可以在firefox上运行,但在chrome上我仍然看到第一次悬停时闪烁。在资源管理器11上,我发现每次悬停都会闪烁。 – 2014-12-06 16:50:41
我认为你的问题将是接近这个副本... http://*.com/questions/3142837/ capture-iframe-load-complete-event您需要确定何时加载框架,然后使其可见。另一个问答说明如何检测帧加载事件。 – Kolban 2014-12-06 16:14:53
@Kolban我试图隐藏iframe并在加载时显示它,但它不起作用。我仍然得到那白色闪烁。看到这个小提琴http://jsfiddle.net/a91bmc4e/5/ – 2014-12-06 16:39:09