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

修改，更新

尝试（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，直到它完全加载

1 个答案: