【问题标题】：Jquery taking effect after the page is loaded页面加载后jquery生效
【发布时间】：2013-05-31 02:25:14
【问题描述】：

我正在使用 jquery ui。但是页面需要很长时间才能加载。我还在 UL 标签的 LI 元素上使用制表符功能。但是在一瞬间，列表按原样显示，然后出现选项卡效果。我已经编写了用于调用同一 html 文件中的选项卡的 javascript。我如何可以减少加载时间以及在分段秒内显示的突然视图。

【问题讨论】：

也许你可以使用多个 $(document).load 函数。或者可能是由于您的图像，您应该包括“延迟加载图像”......但如果没有示例，真的很难说。也许您可以在 jsfiddle 上添加示例？
加载时间是服务器端（例如数据库的繁重处理）还是客户端（向浏览器发送大量 HTML）？关于<ul> 的显示，按照 Adam 的建议进行操作，最初将其隐藏，然后在页面加载时显示。
它首先向我显示没有 jquery 效果的页面，然后出现 jQuery 效果。加载 jquery 需要时间吗？

标签： javascript jquery-ui

【解决方案1】：

如果你真的使用加载事件，那么你可能想切换到the domReady event。

而不是做

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

做

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

或者干脆

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

这是同一件事的捷径

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

【讨论】：

【解决方案2】：

您可以将您的 UL 标签设置为 display:none

【讨论】：

页面加载后他做了什么？你应该再详细一点。

【解决方案3】：

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

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

对于菜单，我要说的是，当 DOM 完全加载时，不要让 JavaScript 启动以呈现 Tabs 效果。 jQuery 可以很容易地检测到这一点:)

【讨论】：

【解决方案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) 将 tabs 构造函数调用放入文档中也是个好主意：

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

结果：

因此，您将 html 从 original 更改为

<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;"><!-- display:none is later reverted by jQuery.tabs -->
        <p>tabs-2 content</p>
    </div>
    <div id="tabs-3" style="display:none;">
        <p>tabs-3 content</p>
    </div>
</div>

结论：

您只是在使用 jQuery 样式。
在 jQuery 开始渲染之前，您的标签导航和标签面板已经就位。
在呈现标签后无需任何清理（例如：从 ul 中删除 display:none）。

【讨论】：