javascript - 附加大文档时 UI 响应太慢

Question

我有一个 Bootstrap 选项卡控件，非常好。在每个选项卡上，我需要加载一个 html 文档(大的可能大于 10MB)。一切正常。但在加载数据后，UI 响应太慢，甚至需要 5.6 秒才能切换选项卡。我不想在点击时有任何延迟。用户界面每次都应该响应。我有什么办法可以做到这一点？这是我到目前为止所做的...

<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(数据)
$(paneID + "iframe") 可以改成 var pane = $(paneID); $('iframe', pane).当您在多个地方使用它时，缓存您的元素也很好。