jquery-ui - 防止 jQueryUI 选项卡显示未修改的 HTML

Question

使用 jQueryUI 选项卡的页面有时会在修改为选项卡之前显示原始标记：

当我看到这个时，它会显示大约 0.2 - 1.0 秒。

如何防止显示原始标记？

Answer 1

那东西叫做FOUC（无样式内容的Flash）。解决方案是使用 css 隐藏包含该选项卡的 div，并在加载整个页面后使用 javascript 将其显示回来。

$(window).load(function () {
   $('#your-tabbed-bar-div').show();
});

更多信息可以在这里找到：http: //www.bluerobot.com/web/css/fouc.asp/ http://paulirish.com/2009/avoiding-the-fouc-v3/

Answer 2

听起来好像有一些 javascript 在 jquery ui 内容之前执行，所以它可以像重新排列 js 标签的顺序一样简单吗？

如果这不起作用，我会建议一个 hack - 确保将样式加载到页面上，如果文件下载速度不够快，这是值得怀疑的，因为浏览器很可能会缓存文件，而这可能不是一开始就很大 - 无论如何，您可以复制样式并确保它们快速加载，然后专门在 html 中设置列​​表元素的类属性。

如果您不喜欢那个 hack，那么这个 hack 怎么样 - 将列表样式设置为 display:none，然后运行使用 setTimeout 继续检查您想要查看的样式属性 - 当它存在时，将显示设置为阻止（或其他），当然在你看到它之后停止检查属性。

Answer 3

这在jQuery UI 文档中有介绍。