4

问题：一些 jQuery UI 效果加载速度很慢，这在第一次加载页面时尤其烦人。

例如，以选项卡小部件为例。有时我可以在标签小部件加载之前使用 jQuery 标签在页面加载期间看到底层列表（另一个缓慢的庞然大物是手风琴小部件）。我想避免这种情况——即以某种方式加快速度，或者减少“JavaScript 重”。

我有一个优化按钮小部件的想法。在标记本身中，我可以为它们分配.button()构造函数将分配的所有样式，然后我就不必再调用.button()了。但是，按钮并不是最慢的，所以这对我的页面加载时间没有多大作用。

类似问题：

问题 1：有没有一些简单的方法可以在PHP 端准备 jQuery 效果（如选项卡），然后对 jQuery UI 小部件进行一些延迟初始化（以保持选项卡的可点击性）？

问题 2：是否有一些好的指南可以避免使用 jQuery UI 以不减慢速度，同时保持良好的用户体验？

4

2 回答 2

5

注意：这只是回答的第一步。我打算改进它，当我有时间在 jQuery 选项卡构造函数中禁用一些东西时。

背景：

您可以进行一些小优化以更顺畅地加载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();}

结果：

所以你从原来的改变你的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;"><!-- 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 开始渲染之前，您的标签导航和标签面板已经就位。
  • 呈现选项卡后无需任何清理（例如：从 中删除display:none） 。ul
于 2013-11-20T19:34:21.007 回答
0

问题1：有没有一些简单的方法可以在php端准备jQuery效果（标签）？然后做一些效果延迟初始化（保持标签可点击）？

答：没有。jQuery 正在操纵 DOM 并添加 php 无法处理的事件处理程序。

问题 2：在保持用户体验的同时，也可以很好地指导一些使用 jQuery UI 避免减慢速度的指南。有人知道这样的指导方针吗？

减少 jQuery 在准备/加载时的工作量。如果你有十几个选项卡，默认只需要加载第一个中的数据，其余的可以延迟加载。您的手风琴也是如此，让 ajax 在用户请求内容时完成工作。

在内容准备好之前不要显示内容。将您的元素设置为默认隐藏并在初始化选项卡后显示它们。visibility:hidden如果您决定这样做，我建议使用，因为它会在页面上为您的元素保留空间，然后在准备好时将其显示出来。display:none另一方面，会使其他页面元素被定位，就好像该元素根本不存在一样。

于 2013-05-23T18:54:55.573 回答