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

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

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

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

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

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.

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

What is the best practice to work with it?

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

4 个解决方案

#1

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:

如果您查看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>

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

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

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

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

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

.startsUgly { display: none; }

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

....并在JavaScript中显示它们,例如$( “startsUgly”)显示();

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

然后处理那些禁用JavaScript的用户,一些

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

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

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

#2

First of all, the jQuery UI classes in the documentation only apply after document.ready. You can style them all you like, but you will not get rid of the flash of unstyled content. The classes are useful for theming the UI, not for affecting how things look before the UI is in place.

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

Second, the noscript tag is basically to be avoided, for a wealth of reasons: 1) It doesn't really tell you if javascript is on or not. For example, it could be enabled in the browser but blocked by a firewall. 2) It's a block level tag, so there are only certain places where it can validly appear. It's not an all-purpose solution. 3) The tag doesn't differentiate between degrees of javascript implementation on different systems.

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

You were closer to the best practice in your original post. The trick is to do both the hiding and the showing in javascript. First, style your page so that it will look acceptable with javascript disabled. Then, to prevent the flash of unstyled content, do the hiding of the ugly elements in javascript before document.ready (this is the critical part) by assigning a class to the html element:

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

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

Because the html element exists already, it's valid to work with it before document.ready. Then, like Nick says, put the offending elements in a div with the class "startsugly" and then put a line in your css that hides the offending elements:

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

.blahblah .startsugly {display: none;}

The point here is that the display:none only comes into play when javascript is enabled. Users with it disabled will still be able to access your content. Then, after document.ready, put in your jQuery UI "pimping" functions, and show the offending element again:

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

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

although if it's content that's only conditionally visible in an accordion or a tab structure, this last step might even be unnecessary.

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

#3

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

#4

Building off of Nick Craver's second suggestion - I have no intention of stealing his answer, just adding another option - you can leverage the beauty of Modernizr. Modernizr will add a simple js class to the html element if JavaScript is enabled. So what you can do is add a simple style to your main style sheet like the following which will only hide the body if JavaScript is enabled (since we have to use JavaScript later on to show the body):

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

main.js body
{
    display: block;
}

And then have a simple line of JavaScript like the following in your 'master page':

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

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

It's a good solution if you are already using Modernizr for other things. Otherwise, if you have no other use for Modernizr, I would go with Nick Craver's suggestion.

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

#1