附加大文档时UI响应太慢

Question

我有一个bootstrap tab控件,这很好.在每个选项卡上我需要加载一个HTML文档(大可能大于10MB).一切正常.但加载数据后,UI响应太慢,即使切换标签需要5,6秒.点击时我不想要任何延迟.UI每次都应该响应.我有什么方法可以达到这个目的吗？这就是我到目前为止所做的......

<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-tabs" id="myTabs">
            <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
            <li><a href="#dpa" data-toggle="tab">DPA</a></li>
            <li><a href="#rn" data-toggle="tab">Antwon</a></li>
        </ul>

        <div class="tab-content" style="width:100%;height:600px;">
            <div class="tab-pane active" id="home">
                <p>test</p>
            </div>
            <div class="tab-pane" id="dpa" data-src="../TabsData/data2.htm">
                <iframe src="" style="width:100%;height:600px"></iframe>
                <div id="data"></div>
            </div>
            <div class="tab-pane" id="rn" data-src="../TabsData/data2.htm">
               <iframe src="" style="width:100%;height:600px"></iframe>
                <div id="data"></div>
            </div>
        </div>
    </div>
</div>

// Javascript代码

$('#myTabs').bind('shown.bs.tab', function (e) {
    paneID = $(e.target).attr('href');
    src = $(paneID).attr('data-src');
    // if the iframe hasn't already been loaded once
    if ($(paneID + " iframe").attr("src") == "") {
       $(paneID + " iframe").attr("src", src);
    }
});

注意:好的,它应该在加载时响应缓慢,因为它有大量数据要加载.但是,一旦装满所有东西,为什么会变慢

Answer 1

由于您要在选项卡更改时加载大文件，因此最好在使用之前在后台加载它们，甚至进行任何操作。

在标签中指定iframe源而不是动态加载它。这样，即使在用户单击选项卡之前，数据也会被下载。

旁注 $(paneID).attr('data-src')可以更改为正确的数据属性用法$(paneID).data('src')
$(paneID)[0].children[0].innerHTML = data我看不到您在哪里设置data变量
$(paneID)[0].children[0].innerHTML = data可以更改为jQuery：$(paneID).children().eq(0).html(data)
$(paneID + " iframe")可以更改为var pane = $(paneID); $('iframe', pane)。当您在多个地方使用元素时，最好缓存它。