Y a-t-il un événement de rendu d'élément?

Question

Je dois mesurer avec précision les dimensions du texte au sein de mon application Web, ce que j'obtiens en créant un élément (avec des classes CSS pertinentes), en définissant son innerHTML puis en l'ajoutant au conteneur en utilisant appendChild.

Après avoir fait cela, il y a une attente avant que l'élément ne soit rendu et que son offsetWidth puisse être lu pour savoir quelle est la largeur du texte.

Actuellement, j'utilise setTimeout(processText, 100) pour attendre que le rendu soit complet.

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

Answer 1

Supposons que votre élément ait une classe class="test" La fonction suivante continue le test si un changement s'est produit si c'est le cas, exécutez la fonction

        function addResizeListener(elem, fun) {
            let id;
            let style = getComputedStyle(elem);
            let wid = style.width;
            let hei = style.height;
            id = requestAnimationFrame(test)
            function test() {
                let newStyle = getComputedStyle(elem);
                if (wid !== newStyle.width ||
                    hei !== newStyle.height) {
                    fun();
                    wid = newStyle.width;
                    hei = newStyle.height;
                }
                id = requestAnimationFrame(test);
            }
        }
        let test = document.querySelector('.test');
        addResizeListener(test,function () {
            console.log("J'ai changé !!")
        });

Answer 2

Selon la réponse de @Elliot B., j'ai élaboré un plan qui me convient.

const callback = () => {
  const el = document.querySelector('#a');
  if (el) {
    observer.disconnect();
    el.addEventListener('click', () => {});
  }
};

const observer = new MutationObserver(callback);
observer.observe(document.body, { subtree: true, childList: true });

Answer 3

Quand vous faites par exemple

var clonedForm = $('#empty_form_to_clone').clone(true)[0];

var newForm = $(clonedForm).html().replace(/__prefix__/g, next_index_id_form);

// next_index_id_form is just a integer 

Qu'est-ce que je fais ici?
J'ai cloné un élément déjà rendu et modifié le html à rendre.

Ensuite j'ajoute ce texte à un conteneur.

$('#container_id').append(newForm);

Le problème survient lorsque je veux ajouter un gestionnaire d'événements à un bouton à l'intérieur de newForm, Eh bien, utilisez simplement l'événement ready.

$(clonedForm).ready(function(event){
   addEventHandlerToFormButton();
})

J'espère que cela vous aide.

PS : Désolé pour mon anglais.