jQuery UI - стиль задержки при загрузке страницы

Question

Я использую виджет вкладок 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 tabs появилась возможность запуска. Я имею в виду, что менее чем за секунду я вижу неупорядоченный список со ссылками на вкладку 1, вкладку 2 и т. Д.

Есть ли способ избавиться от этой задержки? Должен ли я добавить в свою разметку классы, которые в итоге добавит jQuery UI, чтобы избавиться от этого?

Answer 1

Загружается DOM, а затем выполняется ваш jQuery, что является второй задержкой, которую вы видите.Вы можете добавить style="display: none" к элементу tabs, затем:

$ (function () {$ ('# tabs'). Show (); $ ('# tabs'). Tabs ();});

Answer 2

вы можете скрыть свои вкладки по умолчанию и отображать их после вызова функции вкладок,

в вашем HTML:

<div id="tabs" style="visibility:hidden;">

в вашем коде JavaScript

 $(function() {
    $('#tabs').tabs().show();
});