CSS вступает в силу после рендеринга страницы

Question

Я сталкиваюсь с этой проблемой, когда моя страница загружается, а затем через долю секунды происходит CSS-эффекты или стилизация.

Основная проблема, которую я вижу, связана с использованием вкладок JQuery, которые я используюhttp://docs.jquery.com/UI/Tabs#source

Когда страница отображается, вкладки показывают одну под другой в течение секунды, как это:

One 
Two
Three

, а затем отображаются правильно как вкладки

Есть либыстрый и простой способ исправить это.Спасибо

Answer 1

Это не стиль; это библиотека jQasery UI jQuery, которая добавляет необходимый html на вашу страницу, чтобы вкладки выглядели почти как.

У вас есть несколько вариантов. Во-первых, вы можете скрыть свои вкладки и отобразить их, как только пользовательский интерфейс jQuery завершит свою магию. Во-вторых, вы можете стилизовать ваши вкладки так, чтобы они выглядели достаточно близко к конечному результату, чтобы изменения не были столь заметны. В-третьих, вы можете удалить jQuery UI и оформить вкладки только с помощью CSS. Все правильные подходы, я бы сказал.

Надеюсь, это поможет!

EDIT:

Для первого варианта предположим, что это ваш div с вкладками:

<div id="tabs">
  ...stuff...
</div>

В вашей таблице стилей скрыть #tabs:

#tabs {
    display:none;
}

Затем измените ваш вызов jQuery UI следующим образом:

var t = $("#tabs");

t.tabs({
    create:function(){
        t.show();
    }
});

Answer 2

Ответ странного любителя почти работал для меня (используя jQuery 1.5.2), но мне пришлось перехватить событие create:

var t = $("#tabs");

t.tabs({
    create:function(){
        t.show();
    }
});

Спасибо!

Answer 3

Браузеры обычно загружают файлы так, как они появляются в вашем HTML-коде. Обязательно сначала поместите ссылку на ваш файл CSS, чтобы он загружался как можно скорее.

Если CSS применяется с использованием Javascript, сделать его более быстрым. Файл Javascript должен быть загружен перед использованием.

Кроме этого, я не думаю, что есть способ контролировать работу рендеринга в браузере.

Answer 4

Применяется ли CSS через Javascript? В этом случае вы можете добавить некоторый статический CSS, который гарантирует, что элементы будут отображаться по крайней мере горизонтально, перед выполнением JavaScript, добавив некоторый статический CSS.

Если это так, что браузер просто решает применить CSS после рендеринга без него, вы мало что можете сделать. Однако может случиться так, что CSS загружается медленно (если это внешний файл), в этом случае вы можете добавить самый важный стиль в CSS-раздел непосредственно в HTML.