Asa*_*ter 5 jquery tabs load flicker unobtrusive
我正在使用jQuery UI Tabs.我应该如何防止加载内容的闪烁,同时确保在禁用javascript时内容可见？
我已经尝试在加载文档时向主体添加.js类,但是在添加类的同时加载选项卡时,仍然会闪烁内容.
#container{display:none;}
<div id="container">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
</ul>
<div id="tabs-1">
<p>Tab 1</p>
</div>
<div id="tabs-2">
<p>Tab 2</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#tabs').tabs();
$('#container').show();
});
</script>
<html class="nojs">
...
<head>
<script>
document.documentElement.className = "js";
</script>
</head>
...
<style>
#container {display:none;}
.nojs #container { display: block;}
</style>
即使您的设备上没有js,这也会使您的内容可见.这种方法是通过几乎+ H5BP Modernizr的执行相同的和,作为一边益处,它将阻止JS FOUC(无样式的内容闪光由于JS后执行).
这就是我做的.将一类no-js放在你的html标签上,然后在html标签之后放下以下代码:
<script>
// Sets 'js' on html element and removes 'no-js' if present (here to prevent flashing)
(function(){
document.documentElement.className = document.documentElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2') + (' js ');
})();
</script>
html如果需要,此方法允许您在标记上包含其他类.no-js将样式中的类用于未启用js的页面.
样式示例:
#container {
display:none;
}
.no-js #container
{
display: block;
}