我有一个引导选项卡控件,这很好.在每个选项卡上,我需要加载一个html文档(大可能大于10MB).一切都很好但在加载数据后,UI响应太慢,即使需要5,6秒来切换选项卡.
点击时不需要任何延迟. UI应该每次都响应.
我有什么办法实现吗？
这是我迄今为止所做的
点击时不需要任何延迟. 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" src="../TabsData/data2.htm">
<iframe src="" style="width:100%;height:600px"></iframe>
<div id="data"></div>
</div>
<div class="tab-pane" id="rn" 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);
}
});
注意：好的,它应该缓慢加载,因为它有大的数据要加载.但为什么一旦一切都被加载,为什么会慢？
解决方法
关于Javascript的是它是单线程的.所以当你尝试这个大的操作时,它会阻止其他的浏览器事件,直到这个操作完成.然而,JavaScript中最近有一些开发允许多线程进程.
选项1 – 网络工作者
查看并利用Web Workers来抵消流程,使其不影响UI的响应.
选项2 – AJAX
使用AJAX加载您的HTML,以便该进程是异步的.这样,浏览器可以在后台加载而不影响您的UI.
$("#yourDiv").load("demo_test.html");
两者都将解决您的UI问题,因为它正确地将浏览器资源分配给“另一个线程”.
