在document.ready之前，Jquery UI界面看起来很丑陋 [英] Jquery UI interface looks ugly before document.ready

问题描述

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

HTML elements show earlier then onload or document.ready is fired.

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

All jQuery UI widgets load on document.ready and it makes page look ugly for few first seconds.

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

Possible option to deal with it - hide elements before they are pimped out with jQuery UI and show them with JS after load. But in case JS is turned off - user will not see any elements neither standard HTML nor jQuery UI.

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

What is the best practice to work with it?

推荐答案

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

If you look at the jQuery UI documentation, let's take tabs for example, if you look at the Theming tab, you can see the classes to apply to avoid the flash of unstyled content:

<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>

注意：此不是最佳做法，但如果你想要为了避免显示内容，这是一个选项，这是另一个选择：

Note: This isn't the best practice, but if you want to avoid showing the content, it's an option, here's another:

你可以通过CSS隐藏元素，给那些包裹< div> 元素一个类，假设 .startsUgly 在样式表中有哪些：

You can hide the elements via CSS, give those wrapping <div> elements a class, let's say .startsUgly which in your stylesheet has:

.startsUgly { display: none; }

....并在JavaScript中显示它们，例如 $（。startsUgly）。show（）;

....and show them in JavaScript, e.g. $(".startsUgly").show();

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

Then to handle those JavaScript disabled users, some <noscript> magic:

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

这样，那些禁用JavaScript的人不会得到显示：没有效果，他们仍会看到内容。

this way, those with JavaScript disabled simple don't get the display: none effect, they'll still see the content.

这篇关于在document.ready之前，Jquery UI界面看起来很丑陋的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！