Question

编辑：我创建了一个小提琴来显示加载时间的不同（忽略任何视觉css错误：p）https://jsfiddle.net/ayygn8ft/1/

之前有没有人遇到过这种行为？考虑我有以下HTML文件：

<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/viewer.css">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
    </head>
    <body>

        <!-- IMPORTANT CODE SECTION IS RIGHT HERE -->
        <button class="btn waves-effect waves-light bracket-button not-transition">
            Click Me
        </button>
        <div id="frame-overlay" class="scale-transition scale-out card">
            <iframe id="frame" src=""></iframe>
            <div class="loader">Loading...</div>
        </div>
        <!-- END IMPORTANT CODE SECTION -->

        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        <script src="js/viewer.js"></script>
    </body>
</html>

请注意，我已预先定义了一个ID为#frame的iframe。现在我的JS里面有：

$(document).ready(function() {
    var showGG = false;

    $('.bracket-button').click(function() {
        showGG = !showGG;
        if (showGG) {
            $('#frame-overlay').removeClass('scale-out');
            // Set source
            $('#frame').attr('src', source);
            $('#frame').show();
        } else {
            $('#frame-overlay').addClass('scale-out');
            // Remove source
            $('#frame').attr('src', '');
            $('.loader').show();
        }
    });
});

上面的代码有效，但加载iframe的速度很慢。我发现如果我改为删除初始框架，并且动态地追加/删除iframe，它会很快加载：

        if (showGG) {
            $('#frame-overlay').removeClass('scale-out');
            $('#frame-overlay').append('<iframe id="frame" src="' + source + '"></iframe>')
            $('#frame').show();
        } else {
            $('#frame-overlay').addClass('scale-out');
            // Remove source
            $('#frame').remove();
            $('.loader').show();
        }

为什么添加和删除iframe的负载比设置源的速度快得多？我最初的印象是设置源会更快，但它似乎不是这样。

创建新的iframe比设置源要快得多

0 个答案: