Скрыть iframe, пока он не будет полностью загружен

Question

Я хочу скрыть iframe, пока он не будет загружен, чтобы избежать белого мигания. Это происходит постоянно в Internet Explorer 11 и FireFox. Иногда в Chrome, если страница медленно загружается.

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

Answer 1

Edit, Обновлено

Try (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/