CSS вступает в силу после того, как страница представила
Я сталкиваюсь с этой проблемой, где моя страница загружается и затем после части секунды, эффекты CSS или моделирование происходят.
Основной вопрос, который я вижу, с вкладками JQuery, что я использую http://docs.jquery.com/UI/Tabs#source
Когда страница представляет, вкладки показывают один ниже другого в течение секунды как это:
One Two Three
и затем рендеринг правильно как вкладки
Есть ли быстрый и простой способ зафиксировать это.Спасибо
3 ответа
Дело не в стилизации, а в библиотеке javascript jQuery UI, которая добавляет необходимые html на вашу страницу, чтобы вкладки выглядели красиво.
У вас есть несколько вариантов. Во-первых, вы можете скрыть вкладки и отобразить их, когда jQuery UI завершит свою магию. Во-вторых, вы можете стилизовать вкладки так, чтобы они выглядели достаточно близко к готовому результату, чтобы изменения не были так заметны. В-третьих, вы можете отказаться от 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();
}
});
Браузеры обычно загружают файлы в том виде, в каком они появляются в вашем HTML-коде. Обязательно сначала поместите ссылку на свой файл CSS, чтобы он загрузился как можно скорее.
Если CSS применяется с использованием Javascript, ускорить его загрузку невозможно. Перед использованием файл Javascript необходимо загрузить.
Кроме этого, я не думаю, что есть способ контролировать работу рендеринга в браузере.
CSS применяется через Javascript? В этом случае вы можете добавить статический CSS, который обеспечит горизонтальное расположение элементов до выполнения javascript, добавив статический CSS.
Если браузер просто решил применить CSS после рендеринга без него, вы мало что можете сделать. Однако может быть и так, что CSS загружается медленно (если это внешний файл), в этом случае можно добавить наиболее важный стиль в CSS-секцию прямо в HTML.