1

I want to hide the iframe until it's loaded to avoid the white flashing that occurs. It happens all the time on Internet Explorer 11 and FireFox Sometimes on Chrome if the page is slow in loading.

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

Display name
  • 177
  • 1
  • 3
  • 15
  • I think your question is going to be close to a duplicate of this ... http://stackoverflow.com/questions/3142837/capture-iframe-load-complete-event You need to determine when the frame is loaded and then make it visible. The other Q&A illustrates how to detect a frame loaded event. – Kolban Dec 06 '14 at 16:14
  • @Kolban I tried to hide iframe and show it when it's loaded, but it doesn't work. I still get that white flicker. See this fiddle http://jsfiddle.net/a91bmc4e/5/ – Display name Dec 06 '14 at 16:39

1 Answers1

1

Edit, Updated

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/

guest271314
  • 1
  • 15
  • 104
  • 177