jquery - jQuery UI 界面在 document.ready 之前看起来很难看

Question

HTML 元素在 onload 或 document.ready 被触发之前显示。

所有 jQuery UI 小部件都加载到 document.ready 上，它使页面在最初的几秒钟内看起来很丑陋。

处理它的可能选项 - 在元素被 jQuery UI 拉皮条之前隐藏元素，并在加载后用 JS 显示它们。但是如果 JS 被关闭 - 用户将看不到任何元素，既不是标准 HTML 也不是 jQuery UI。

使用它的最佳实践是什么？

Answer 1

如果您查看 jQuery UI 文档，让我们以选项卡为例，如果您查看主题选项卡，您可以看到要应用的类以避免无样式内容的闪烁：

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

注意：这不是最佳做法，但如果您想避免显示内容，这是一个选项，这是另一个选项：

您可以通过 CSS 隐藏元素，给这些包装<div>元素一个类，让我们说.startsUgly您的样式表中有哪些：

.startsUgly { display: none; }

....并在 JavaScript 中显示它们，例如$(".startsUgly").show();

然后处理那些禁用 JavaScript 的用户，一些<noscript>魔法：

<noscript>
  <style type="text/css">.startsUgly { display: block; }</style>
</noscript>

这样，那些禁用 JavaScript 的人就不会得到display: none效果，他们仍然会看到内容。

Answer 2

首先，文档中的 jQuery UI 类只在 document.ready 之后应用。您可以为它们设置任何您喜欢的样式，但您不会摆脱无样式内容的闪光。这些类对 UI 主题很有用，而不是在 UI 到位之前影响事物的外观。

其次，基本上要避免使用 noscript 标签，原因有很多： 1）它并没有真正告诉你 javascript 是否打开。例如，它可以在浏览器中启用，但被防火墙阻止。2）它是块级标签，所以只有某些地方可以有效出现。这不是一个万能的解决方案。3) 标签不区分不同系统上的 javascript 实现程度。

您更接近原始帖子中的最佳实践。诀窍是在 javascript 中同时进行隐藏和显示。首先，为您的页面设置样式，使其在禁用 javascript 的情况下看起来可以接受。然后，为了防止无样式内容的闪烁，通过为 html 元素分配一个类，在 document.ready之前隐藏 javascript 中的丑陋元素（这是关键部分）：

jQuery('html').addClass('blahblah');

因为 html 元素已经存在，所以在 document.ready 之前使用它是有效的。然后，就像尼克说的那样，将有问题的元素放在一个带有“startsugly”类的 div 中，然后在你的 CSS 中放置一行来隐藏有问题的元素：

.blahblah .startsugly {display: none;}

这里的重点是 display:none 仅在启用 javascript 时才起作用。禁用它的用户仍然可以访问您的内容。然后，在 document.ready 之后，放入你的 jQuery UI “pimping”函数，并再次显示有问题的元素：

$(".startsUgly").show();

尽管如果它的内容仅在手风琴或选项卡结构中有条件地可见，那么最后一步甚至可能是不必要的。

Answer 3

基于 Nick Craver 的第二个建议 - 我无意窃取他的答案，只是添加另一个选项 - 您可以利用 Modernizr 的美感。js如果启用了 JavaScript，Modernizr 将向 html 元素添加一个简单的类。所以你可以做的是在你的主样式表中添加一个简单的样式，如下所示，它只会在启用 JavaScript 时隐藏正文（因为我们稍后必须使用 JavaScript 来显示正文）：

main.js body
{
    display: block;
}

然后在您的“母版页”中添加一行简单的 JavaScript，如下所示：

<script type="text/javascript">
    $(function()
    {
        $("body").css("display", "block");
    }
</script>

如果您已经将 Modernizr 用于其他事情，这是一个很好的解决方案。否则，如果您对 Modernizr 没有其他用途，我会接受 Nick Craver 的建议。

Answer 4

$('[class*=" ui-"]').remove();