背景：

Question

我正在使用jquery ui。但该页面需要花费大量时间才能加载。另外我在UL标签的LI元素上使用tabs功能。但是，对于一瞬间，列表将按原样显示，之后会发生Tabs效果。我编写了用于在同一个html文件中调用选项卡的javascript。如何减少加载时间以及分秒显示的突然视图。

Answer 1

如果您确实使用了加载事件，那么您可能希望切换到the domReady event。

而不是

<head>
<script>
    $(document).load(eventHandler);
</script>
</head>

DO

<head>
<script>
    $(document).ready(eventHandler);
</script>
</head>

或只是

<head>
<script>
    $(eventHandler);
</script>
</head>

这是同一件事的快捷方式

一旦DOM准备好被操作，这将在触发图像之前触发，并且通常在浏览器首次呈现页面之前触发，这取决于您构建页面的方式。

Answer 2

您可以将UL标记设置为display：none

Answer 3

@dilip 对于加载时间，您可以使用Firefox安装Firebug并查看加载时间。

如果您使用PHP生成页面，您还可以使用http://www.xdebug.org/查看PHP每个脚本文件占用最多时间的位置。

对于菜单我会说，当DOM完全加载时，不要让JavaScript启动Tabs效果。 jQuery可以轻松检测到：）

Answer 4

背景：

您可以为更顺畅地加载tabs 做一些小优化。但它基本上是易于使用的权衡。你已经在你的html中添加了一些css类，不要等到jQuery为你添加它。当jQuery接管时，这可以避免页面中所有有趣的动作，因为元素已经存在。

解释步骤：

1）div包含所有标签：

添加类ui-tabs，它与step2结合使用将禁止原始列表，并将导航设置到位。
您可以添加类ui-widget，以修复字体大小和第一个标签在导航中的位置。

2）ul包含导航项：

添加类ui-tabs-nav，完成列表重新定位。

3）每个特定的div包含选项卡面板，它不活动：

您添加style="display:none;"。无论如何，这就是jQuery所做的。因此，在标签准备好后，您不必删除样式。 jQuery为你做到了。它还比粗略隐藏所有标签内容更精细。

4）将标签构造函数调用放入文档中也是个好主意：

$(document).ready(function(){$( "#tabs" ).tabs();}

结果：

所以你从original

更改你的html

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>tabs-1 content</p>
    </div>
    <div id="tabs-2">
        <p>tabs-2 content</p>
    </div>
    <div id="tabs-3">
        <p>tabs-3 content</p>
    </div>
</div>

以

<div id="tabs" class="ui-tabs ui-widget"> <ul class="ui-tabs-nav"> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>tabs-1 content</p> </div> <div id="tabs-2" style="display:none;"> <p>tabs-2 content</p> </div> <div id="tabs-3" style="display:none;"> <p>tabs-3 content</p> </div> </div>

结论：

您只是使用jQuery样式。

在jQuery开始渲染之前，您的选项卡导航和选项卡面板已经就位。

在呈现标签后，无需进行任何清理（例如：从display:none删除ul）。

加载页面后Jquery生效

4 个答案:

背景：

解释步骤：

结果：

结论：