在document.ready之前，Jquery UI界面看起来很难看

HTML元素显示早于onload或document.ready被触发。

所有jQuery UI小部件都加载到document.ready上，它使页面看起来很难看，只需几秒钟。

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

使用它的最佳做法是什么？

Answer 1

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

 
 
Nunc tincidunt
 
Proin dolor
 
 
Tab one content goes here.
 
 ...  

注意：这不是最好的做法，但是如果你想避免显示内容，那么这是一个选项，这是另一个选择：

你可以通过CSS隐藏元素，给那些包装

元素一个类，让我们说.startsUgly在你的样式表中有：

 .startsUgly { display: none; } 

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

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

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

Answer 2

首先，文档中的jQuery UI类仅适用于document.ready之后。 你可以随心所欲地设计它们，但你不会摆脱无格式内容的闪光。 这些类对于UI的使用非常有用，而不是在UI到位之前影响事物的外观。

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

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

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

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

 .blahblah .startsugly {display: none;} 

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

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

虽然如果它只是在手风琴或标签结构中有条件可见的内容，但最后一步甚至可能是不必要的。

Answer 3

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

Answer 4

建立尼克克拉弗的第二个建议 – 我无意窃取他的答案，只是添加另一个选项 – 你可以利用Modernizr的美丽。 如果启用了JavaScript，Modernizr将为html元素添加一个简单的js类。 所以你可以做的是在主样式表中添加一个简单的样式，如下所示，只有在启用JavaScript时才会隐藏正文（因为我们以后必须使用JavaScript来显示正文）：

 main.js body { display: block; } 

然后在“主页”中有一个简单的JavaScript行，如下所示：

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