Как узнать, когда все CSS отображаются в браузере (чтобы избежать FOUC)

Question

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

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

Как узнать, когда браузер полностью "рендерит" CSS? Я полагаю, что $(документ) в jQuery, вероятно, уже не так - как раз тогда, когда загружается DOM, верно? У меня есть доступ к Modernizr в коде, и я мог бы что-то с этим сделать - но я не хочу загружать скрипты CSS или даже знать, когда они были загружены, но когда браузер завершил обработку всех их и выработка всех противоречивых правил.

Спасибо за любую помощь -

Answer 1

В подобных ситуациях я обычно устанавливаю интервал javascript, который просматривает конкретный элемент, чтобы увидеть, соответствует ли один из них правилам css тому, что будет установлено в таблице стилей. Например, допустим, у меня есть таблица стилей с глупым правилом, например:

p { margin-left: 900px; }

Затем я использую jQuery для проверки левого поля:

jQuery(document).ready(function(){
    var stylesheetInterval = setInterval(function(){
        if ( jQuery("p").css("margin-left") == "900px" ) {
            clearInterval( stylesheetInterval );
            // my stylesheet must have loaded. Now I can do whatever else I feel like doing.
        }
    }, 100);
});