Détecter lorsque toutes les règles CSS ont été appliquées et peintes

Question

Pendant le processus de rendu d'une page Web, il existe un délai entre le chargement d'une feuille de style et l'heure à laquelle toutes les règles de cette feuille de style sont appliquées et la peinture est terminée.

Ce délai dépend de la taille de la feuille de style et de la complexité des règles.

Existe-t-il un moyen fiable de vérifier quand le processus de peinture a été complété? Je recherche un moyen qui fonctionnera également lorsque les règles CSS sont appliquées dynamiquement, c'est-à-dire lorsque de nouvelles feuilles de style sont ajoutées à la page ou lorsque les styles sont modifiés par JavaScript. Donc document.onload n'est pas une option ici.

Contexte: je travaille sur une grande échelle app seule page, qui charge les feuilles de style à la volée. Pour éviter un flash de contenu non stylé, je montre un fileur, et j'ai besoin de savoir exactement quand le cacher.

Answer 1

Je dirais que la solution la plus fiable serait d'ajouter un petit délai après l'événement css chargé.

Quelque chose comme ce pseudo-code:

myCssTag.onload(function(){ 
    setTimeout(doStuffAfterRender, 100); 
});