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

Question

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

jqueryuser-interfaceonloaddocument-ready

15

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

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

应对此情况的可能选项是 - 在使用jQuery UI之前隐藏元素，并在加载后使用JS显示它们。但是，在JS关闭的情况下，用户将无法看到任何元素，无论是标准HTML还是jQuery UI。

最佳实践是什么？

- Alex Kirs

3

新闻快讯：jQuery UI 总是看起来很丑。 - Steve

我也是这么想的... :D - Joshua F. Rountree

4个回答

4

首先，文档中的jQuery UI类仅适用于document.ready之后。您可以随意设置它们的样式，但是无法摆脱未经样式化的内容的闪烁。这些类对于主题UI非常有用，但不影响UI放置之前的外观。

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

原始帖子更接近最佳实践。关键是先使用javascript禁用页面，使其看起来可接受。然后，为了防止未经样式化的内容的闪烁，请在document.ready之前使用javascript隐藏丑陋的元素（这是关键部分），并将一个类分配给html元素以进行显示。

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

因为HTML元素已经存在，所以在文档准备好之前就可以使用它。然后，像Nick说的那样，将有问题的元素放入一个带有类名“startsugly”的div中，然后在CSS中添加一行代码来隐藏这些有问题的元素：

.blahblah .startsugly {display: none;}

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

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

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

- Ben

1

借鉴Nick Craver的第二个建议——我没有盗用他的回答，只是添加另一个选项——您可以利用Modernizr的美妙之处。如果启用了JavaScript, Modernizr将在HTML元素中添加一个简单的js类。所以，您可以在主样式表中添加以下简单样式，仅在启用JavaScript时隐藏body（因为我们后来必须使用JavaScript显示body）：

main.js body
{
    display: block;
}

然后在您的“主页面”中添加以下简单的JavaScript代码行：

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

如果您已经在使用Modernizr进行其他操作，那么这是一个不错的解决方案。否则，如果您没有其他用途需要Modernizr，我建议您采用Nick Craver的建议。

- Alex Jorgenson

0

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

- Joshua F. Rountree

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Craver · Accepted Answer

如果您查看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隐藏元素，给包装

元素添加一个类，比如.startsUgly类，在您的样式表中定义如下：

.startsUgly { display: none; }

从JavaScript中展示它们，例如$(".startsUgly").show();

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

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

采用这种方式，那些禁用JavaScript的用户就不会受到display: none效果的影响，他们仍然可以看到内容。