HTML元素之前显示为onload或document.ready被触发.
所有jQuery UI小部件都加载到document.ready上,它使页面看起来很丑,几秒钟.
处理它的可能选项 – 在使用jQuery UI进行删除之前隐藏元素,并在加载后将其显示给JS.但是如果JS被关闭 – 用户将看不到任何标准的HTML和jQuery UI的元素.
使用它的最佳做法是什么？
解决方法
如果您查看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”)显示();
然后为了处理那些禁用JavaScript的用户,一些< noscript>魔法：
<noscript>
<style type="text/css">.startsUgly { display: block; }</style>
</noscript>
这样,那些使用JavaScript禁用的人不会显示：无效果,他们仍然会看到内容.