CODEWITHSUNDEEP
jqueryiframe
Display name
Display name

Reputation: 177

Hide iframe until it's fully loaded

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

Upvotes: 1

Views: 2832

Answers (1)

guest271314
guest271314

Reputation: 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/

Upvotes: 1

Related Questions