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

Question

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

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

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

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

Answer 1

如果您查看 jQuery UI 文档，let's take tabs for example ，如果您查看主题选项卡，您可以看到要应用的类以避免出现无样式内容:

<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效果，他们仍然会看到内容。