jQuery UI - 页面加载样式延迟
我正在使用 jQuery UI 选项卡小部件来设计我的页面样式：
<div id="tabs">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
</ul>
<div id="tab-1">
...
</div>
<div id="tab-2">
...
</div>
</div>
<script type="text/javascript">
$(function() {
$('#tabs').tabs();
});
</script>
我遇到的问题是，当我第一次加载页面一小会儿时，我看到页面在 jquery 选项卡函数有机会运行之前未设置样式。我的意思是，不到一秒钟，我就看到一个无序列表，其中包含选项卡 1、选项卡 2 等的链接。
有没有办法消除这种延迟？我是否应该将类添加到 jQuery UI 最终添加的标记中以摆脱这个问题？
I'm using the jQuery UI tabs widget to style my page:
<div id="tabs">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
</ul>
<div id="tab-1">
...
</div>
<div id="tab-2">
...
</div>
</div>
<script type="text/javascript">
$(function() {
$('#tabs').tabs();
});
</script>
The problem I have is when I first load the page for a brief moment, I see the page unstyled before the jquery tabs function has had a chance to run. What i mean is for less than a second I see an unordered list with links for Tab 1, Tab 2, etc.
Is there a way to get rid of this delay? Should I add the classes to my markup that jQuery UI ends up adding in order to get rid of this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
DOM被加载，然后你的 jQuery 被执行，这是你看到的第二个延迟。您可以将style="display: none"添加到tabs元素，然后：$(function() {
$('#tabs').show();
$('#tabs').tabs();
});
The
DOMis loaded and then your jQuery is executed, which is the second delay you see. You can addstyle="display: none"to yourtabselement, then:$(function() {
$('#tabs').show();
$('#tabs').tabs();
});
您可以默认隐藏选项卡，并在
您的 HTML 中调用选项卡函数后显示它们：
在您的 javascript 代码中
you could hide your tabs by default and display them after you called the tabs function,
in your HTML:
in your javascript code