隐藏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(''); 

    }); 
});

JS FIDDLE LINK

来源

2014-12-06 Display name

我认为你的问题将是接近这个副本... http://stackoverflow.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

编辑，更新

尝试（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/

来源

2014-12-06 16:21:02 guest271314

谢谢，但我不希望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

隐藏iframe直到它完全加载

回答

相关问题