Détecter les modifications DOM du navigateur complet

Question

J'ai un code JavaScript qui ajoute du nouveau XHTML à la page déjà existante (arborescence DOM). Mes éléments de page étant dynamiques, l'ajout de nouveaux éléments entraîne des modifications de la taille des autres éléments. J'ai une implémentation de barre de défilement personnalisée qui dépend de ces tailles et doit être réinitialisée chaque fois qu'ils changent.

J'appelle la méthode de réinitialisation peu de temps après l'instruction qui insère le nouveau XHTML. Mais il semble que c'est trop tôt. Parfois, la barre de défilement ne s'ajuste pas correctement. Si j'ajoute un peu de retard avant la réinitialisation, c'est OK, mais je le considère comme une solution trop grossière et peu fiable.

J'ai besoin soit:

Detect quand donné élément DOM changement de la taille, battant

ou

détecter quand l'ensemble du changement DOM se termine ainsi que la re-mise en page.

Jusqu'ici, je n'ai rien trouvé. Je sais que la situation est trop complexe pour la plupart des gens, mais j'espère que quelqu'un sera en mesure d'aider. Merci!

Answer 1

Que diriez-vous d'un sondage où vous vérifiez l'état de la dom? C'est avec jQuery et appelez resetMyScrollbar chaque fois que le html dans le corps de la page se met à jour avec un délai d'une demi-seconde maximum.

var lastDom = ""; 
function checkDomHash() { 
    var newDom = $("body").html(); 
    if (newDom != lastDom) { 
    resetMyScrollbar(); 
    } 
    window.setTimeout(checkDomHash, 500); 
} 

Dans la vie réelle, j'utiliserais une fonction de hachage et je comparerais les hachages car comparer des chaînes énormes est une perte de temps.

var lastDomHash = ""; 
... 
    var newDomHash = md5OrWhatever($("body").html()); 
    ... 

Modifier

Ou vous pouvez vérifier la hauteur de ce que la barre de défilement est pour.

var lastHeight = 0; 
... 
    var newHeight = $("#my_element_id").outerHeight(); 
    ... 

Answer 2

Essayez l'événement onload.