Existe-t-il un « rendu des éléments » ? événement?

Question

J'ai besoin de mesurer avec précision les dimensions du texte dans une application Web et je le fais en créant un élément (avec la classe CSS appropriée), en le définissant innerHTML 然后使用 appendChild et en l'ajoutant à un conteneur.

Après cela, vous devez attendre un moment avant que l'élément soit rendu et que son offsetWidth puisse être lu pour connaître la largeur du texte.

Actuellement, j'utilise setTimeout(processText, 100) pour attendre la fin du rendu.

Existe-t-il un rappel que je peux écouter, ou un moyen plus fiable de savoir quand l'élément que j'ai créé a été rendu ?

Answer 1

La réponse acceptée date de 2014 et est désormais obsolète. setTimeout Cela pourrait fonctionner, mais ce n'est pas le plus propre et ne garantit pas nécessairement que l'élément a été ajouté au DOM.

Depuis 2018, MutationObserver est ce que vous devez utiliser pour détecter lorsqu'un élément est ajouté au DOM. Les MutationObservers sont désormais largement pris en charge dans tous les navigateurs modernes (Chrome 26+, Firefox 14+, IE11, Edge, Opera 15+, etc.).

Après avoir ajouté un élément au DOM, vous pourrez récupérer ses dimensions réelles.

Voici un exemple simple de la façon d'utiliser MutationObserver pour écouter lorsqu'un élément est ajouté au DOM.

Par souci de brièveté, j'utilise la syntaxe jQuery pour créer des nœuds et les insérer dans le DOM.

var myElement = $("
hello world
")[0];

var observer = new MutationObserver(function(mutations) {
   if (document.contains(myElement)) {
        console.log("It's in the DOM!");
        observer.disconnect();
    }
});

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

$("body").append(myElement); // console.log: It's in the DOM!

Tant que c'est dedans document 中添加或删除任何节点，observer 事件处理程序就会触发。然后，在处理程序内，我们执行 contains 检查以确定 myElement 现在是否位于 document.

Vous n'avez pas besoin de l'itération stockée dans le chèque mutations 中的每个 MutationRecord，因为您可以直接对 myElement 执行 document.contains.

Pour améliorer les performances, modifiez document 替换为 DOM 中将包含 myElement des éléments spécifiques.

Answer 2

Il n'y a actuellement aucun événement DOM indiquant que l'élément a été entièrement rendu (comme un CSS supplémentaire appliqué et dessiné). Cela peut amener certains codes de manipulation DOM à renvoyer des erreurs ou des résultats aléatoires (comme l'obtention de la hauteur d'un élément).

Utiliser setTimeout pour donner au navigateur une certaine surcharge de rendu est le moyen le plus simple. Utiliser

setTimeout(function(){}, 0)

est probablement le plus précis en pratique, car il place votre code à la fin de la file d'attente des événements du navigateur actif sans aucun délai - en d'autres termes, votre code est mis en file d'attente immédiatement après l'opération de rendu (et tout ce qui se passe à ce moment-là) ) .