HTML元素在onload或document.ready之前显示。
所有jQuery UI小部件都在document.ready上加载,这使页面在最初的几秒钟内看起来很丑陋。
应对此情况的可能选项是 - 在使用jQuery UI之前隐藏元素,并在加载后使用JS显示它们。但是,在JS关闭的情况下,用户将无法看到任何元素,无论是标准HTML还是jQuery UI。
最佳实践是什么?
HTML元素在onload或document.ready之前显示。
所有jQuery UI小部件都在document.ready上加载,这使页面在最初的几秒钟内看起来很丑陋。
应对此情况的可能选项是 - 在使用jQuery UI之前隐藏元素,并在加载后使用JS显示它们。但是,在JS关闭的情况下,用户将无法看到任何元素,无论是标准HTML还是jQuery UI。
最佳实践是什么?
如果您查看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
效果的影响,他们仍然可以看到内容。
.startsUgly {visibility:hidden;}
然后在准备好时删除类:$(".startsUgly").removeClass("startsUgly");
不排除我做错了什么的可能性... - bpodgurskyjQuery('html').addClass('blahblah');
因为HTML元素已经存在,所以在文档准备好之前就可以使用它。然后,像Nick说的那样,将有问题的元素放入一个带有类名“startsugly”的div中,然后在CSS中添加一行代码来隐藏这些有问题的元素:
.blahblah .startsugly {display: none;}
$(".startsUgly").show();
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的建议。
$('[class*=" ui-"]').remove();