vordan
2/19/2017 - 3:20 PM

Vanilla JavaScript Document Ready (Cross-Browser)

Vanilla JavaScript Document Ready (Cross-Browser)

<div id="page">
  This is the DOM!
</div>
(function(document, window, domIsReady, undefined) {
  domIsReady(function() {
    console.log('My DOM is ready peeps!');
    document.querySelector('#page').style.background = 'blue';
  });
})(document, window, domIsReady);
var domIsReady = (function(domIsReady) {  
  var isBrowserIeOrNot = function() {
    return (!document.attachEvent || typeof document.attachEvent === "undefined" ? 'not-ie' : 'ie');
  }
  
  domIsReady = function(callback) {
    if(callback && typeof callback === 'function'){
      if(isBrowserIeOrNot() !== 'ie') {
        document.addEventListener("DOMContentLoaded", function() {
          return callback();
        });
      } else {
        document.attachEvent("onreadystatechange", function() {
          if(document.readyState === "complete") {
            return callback();
          }
        });
      }
    } else {
      console.error('The callback is not a function!');
    }
  }
  
  return domIsReady;
})(domIsReady || {});