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
});
Хотя это, кажется, работает, я не уверен, что это так - трудно сказать - проблема, которая у меня все еще существует. Как я могу быть уверен, что вышеприведенное действительно применяет стили, прежде чем перейти к "логике после применения стилей"?