如何避免动态生成的 jQuery UI 选项卡上的 FOUC

Question

我使用 jQUery UI 选项卡动态创建多个选项卡 - 这些选项卡是使用视图页面上的 foreach 创建的，如下所示（一些 codeigniter 标记）：

<script type="text/javascript"> 
$(function($) {
   $('#plants').tabs('paging', { follow: true } );
});
</script>

<div id="plants">
    <ul>
    <?php foreach ($plants as $row):
      echo '<li><a href="#tabs-'.$row->plant_id.'">'.$row->plant_name.'</a></li>';
      endforeach; ?>
    </ul>
    <?php if (!empty($plants)):
          foreach ($plants as $row): ?>
        <div class="block" id="tabs-<?php echo $row->pet_id; ?>">
             <div class="grid_6">
                            <p>
                <?php echo '<h1>'.$row->pet_name.'</h1>'; ?>
                                etc...
                </p>
                     </div>
                 </div>
               <?php
               endforeach;
               else:
               endif; ?>
</div>

如上所述，选项卡形成良好。问题在于无样式内容的良好闪现。它发生在 IE、Chrome、FF 上。

我已经尝试过 jQuery 文档中的 CSS 选项，但没有成功。

有一个简单的 JS，它在 上插入 CSS 样式，然后在特定的 id 上应用 {display:none} --但这使我的面板消失，等待用户交互。我需要第一个面板在加载时对用户可见，以及顶部的其他选项卡 - 没有该死的 FOUC。

有谁知道如何明确解决 jQuery UI 选项卡上的 FOUC 问题？它看起来确实不太好，如果我不能解决这个问题，我可能不得不完全放弃选项卡。

非常感谢任何指示/路线图！

Answer 1

JQuery UI 文档建议：

...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized

Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will not degrade gracefully with JavaScript being disabled:

<div id="example" class="ui-tabs">
  ...
  <div id="a-tab-panel" class="ui-tabs-hide"> </div>
  ...
</div>

不确定您是否尝试过此操作，或者是否确实相关。

Answer 2

我发现在 head 标签中准备好的文档中触发 tabs() 函数可以防止我出现无样式的选项卡闪烁......

$(document).ready(function() {

    //fire off the tabs
    $(function() {
        $( "#tabs" ).tabs();
    });

});

我用于通过 ajax 显示选项卡的另一种方法是一个 ajax 请求，它写入通过 jquery.tmpl 的选项卡。

Answer 3

在 DOM 准备好之前隐藏整个页面（ 元素），然后一旦 DOM 准备好，您就可以再次使 html 元素可见：

$('html').css('visibility','hidden');
$(function() {
    $('html').css('visibility','visible');
    $('#tabs').tabs();
});

这是有效的，因为当在 head 中遇到此 javascript 时，html 元素就可用，在任何其他 DOM 元素（如 body）可用之前。