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

Question

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

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

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

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

Answer 1

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

<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效果,他们仍会看到内容.