Javascript ожидает применения всех стилей элемента

Мне нужно разрешить (т.е. "применить", а не просто загрузить в память) все стили для всех элементов веб-страницы HTML с помощью некоторого javascript/jquery. Стили могут быть встроены в тег стиля элемента, встроены в стили страницы или быть внешними из таблицы стилей.

Я видел примеры разрешения одного элемента или даже одного стиля с использованием window.getComputedStyle с setTimeout, но мне нужно убедиться, что все элементы разрешены (не только один или даже группа).

(Обратите внимание, что у меня много javascript, запускаемого после загрузки страницы, который генерирует дополнительный html (со стилями), поэтому document.ready и window.load уже сработали к моменту завершения javascript страницы)

(Обратите внимание, что это не просто вопрос ожидания загрузки файла таблицы стилей - это скорее ожидание применения стилей из всех источников)

Это возможно?

ОБНОВИТЬ

Основываясь на примере из @Kaiido, я пришел к следующему (он использует JQuery Deferred, а не Javascript Promise - это потому, что я более знаком с Deferred и мне нужно, чтобы он соответствовал внутренним стандартам JQuery)

<style>
    .myStyle {...}
    .myStyle2 {...}
</style>

var cssIsAppliedPromise = function(){
    var trigger = document.createElement('style');
    trigger.innerHTML = 'body{opacity:1;}';
    var waiter = document.createElement('style');
    waiter.innerHTML = 'body{transition : opacity 0.1s linear; opacity:.9}';
    var deferred = $.Deferred();
    // will trigger only when all styles are applied
    function isDone(evt) {
        // some cleanup
        waiter.parentNode && document.head.removeChild(waiter);
        trigger.parentNode && document.head.removeChild(trigger);
        // resolve the promise
        deferred.resolve();
    }
    document.body.addEventListener('transitionend', isDone, {
        once: true
    });
    document.head.appendChild(waiter);
    // append it only when all resources are fetched
    window.onload(function() {
        document.body.offsetWidth; // trigger a reflow
        document.head.appendChild(trigger);
    });
    return deferred.promise();
}
cssIsAppliedPromise.done(function(){
        //logic after styles applied
});

Хотя это, кажется, работает, я не уверен, что это так - трудно сказать - проблема, которая у меня все еще существует. Как я могу быть уверен, что вышеприведенное действительно применяет стили, прежде чем перейти к "логике после применения стилей"?

0 ответов

Другие вопросы по тегам