Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using Mutation Observers to Watch for Element Availability
(function(win){
'use strict';
var listeners = [],
doc = win.document,
MutationObserver = win.MutationObserver || win.WebKitMutationObserver,
observer;
function ready(selector, fn){
// Store the selector and callback to be monitored
listeners.push({
selector: selector,
fn: fn
});
if(!observer){
// Watch for changes in the document
observer = new MutationObserver(check);
observer.observe(doc.documentElement, {
childList: true,
subtree: true
});
}
// Check if the element is currently in the DOM
check();
}
function check(){
// Check the DOM for elements matching a stored selector
for(var i = 0, len = listeners.length, listener, elements; i < len; i++){
listener = listeners[i];
// Query for elements matching the specified selector
elements = doc.querySelectorAll(listener.selector);
for(var j = 0, jLen = elements.length, element; j < jLen; j++){
element = elements[j];
// Make sure the callback isn't invoked with the
// same element more than once
if(!element.ready){
element.ready = true;
// Invoke the callback with the element
listener.fn.call(element, element);
}
}
}
}
// Expose `ready`
win.ready = ready;
})(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment