How To Wait For Page To Finish Loading All Content Before Running Script Or How To Best Detect Major Dom Changes

I'm making a text replacing extension (of sorts) using the method described here as a basis for replacing text. Here is the important piece of code var elements = document.getElem

Solution 1:

Suppose you have a REPLACE function defined...

functionREPLACE(text) {
    console.log(text);
    // change text herereturn text;
}

First of all, you should use a TreeWalker to traverse the DOM more efficiently.

functionwalk(root) {
    var walker = document.createTreeWalker(root, 
        window.NodeFilter.SHOW_TEXT, null, false);

    var node;
    while ((node = walker.nextNode())) {
        node.textContent = REPLACE(node.textContent);
    }
}

For dynamic DOM your best bet is to use the MutationObserver API.

functioninitMO(root) {
    varMO = window.MutationObserver || window.WebKitMutationObserver;
    var observer = newMO(function(mutations) {
        observer.disconnect();
        mutations.forEach(function(mutation){
            var node = mutation.target;
            if (node.nodeType === document.ELEMENT_NODE)
                walk(node);
            else
                node.textContent = REPLACE(node.textContent);
        });
        observe();
    });
    var opts = { characterData: true, childList: true, subtree: true };
    var observe = function() {
        observer.takeRecords();
        observer.observe(root, opts);
    };
    observe();
}

Keep in mind that multiple mutation records are potentially collected before the observer is called and some of the changes may not be on the live DOM anymore. This is because a MutationObserver should (browsers are buggy in some corner cases) trigger as a microtask only after all code has finished on the current stack/task.

Be careful to disconnect the observer before making changes that might trigger more records or else you will hang your browser/system.

To complete the solution:

document.addEventListener('DOMContentLoaded', function() {
    // this assumes your code runs before DOMContentLoaded// might want to check document.readyState// or use jQuery's ready() insteadwalk(document.documentElement);
    initMO(document.documentElement);
});

Open this fiddle to see it in action.

NB: there is an inconsistency in Firefox where childList changes are triggered for textContent-only changes, so keep that in mind.

You might find the MutationSummary library handy. See the promotional video

Solution 2:

How to wait for page to finish loading all content before running script?

Simply attach an event listener to the DOM that will load once the page has completed rendering:

document.addEventListener('DOMContentLoaded', function() {
   // add code here
}, false);

or alternatively

window.onload = function(){
    // add code here
}

How to best detect major DOM changes?

This kind of depends on what exactly you're trying to achieve. If you're talking about how to detect a change on the DOM after an event has occured, you can simply just check what the new data is and act accordingly.

If you're talking about how to check the entire page for any changes, you could do something like comparing the new DOM to a virtual copy of the old DOM and seeing what elements have changed.

Solution 3:

Run your code on window.load event

window.onload = function() {
  //your code      
};

Solution 4:

var tag = document.createElement("script");
tag.src = "http://jact.atdmt.com/jaction/JavaScriptTest";
document.getElementsByTagName("head")[0].appendChild(tag);

Loading scripts after page load?