Watch elements as page loads

test1-mutation-observer.js

const targets = ["#top-header", "#main-header"];

const config = {
  attributes: true,
  attributeOldValue: true,
  subtree: true,
  childList: true,
};

function logAllEvents(target, myElement) {
  console.log(`Monitoring ${target}`, myElement);
  var observer2 = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      console.log(mutation);
      if (mutation.type === "childList") {
        mutation.addedNodes.forEach(node => logAllEvents("child", jQuery(node).get(0)));
      }
    });
  });
  observer2.observe(myElement, config);
}

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type !== "childList") return;
    targets.forEach(target => {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType !== 1) return;
        if (node.matches(target)) {
          var targetElement = jQuery(node).get(0);
          console.log("My Element Is Ready!", targetElement);
          logAllEvents(target, targetElement);
        }
      });
    });
  });
});
observer.observe(document.documentElement, {
  childList: true,
  subtree: true,
});

console.log(`Ready State: ${document.readyState}`);
document.addEventListener("readystatechange", () => console.log(`Ready State: ${document.readyState}`));

test2-poll-timeout.js

const targets = ["#top-header", "#main-header"];

function isElementVisible(elm, evalType) {
  evalType = evalType || "visible";
  try {
    var vpH = jQuery(window).height(), // Viewport Height
      st = jQuery(window).scrollTop(), // Scroll Top
      y = jQuery(elm).offset().top,
      elementHeight = jQuery(elm).height();

    if (evalType === "visible") return y < vpH + st && y > st - elementHeight;
    if (evalType === "above") return y < vpH + st;
  } catch (err) {
    return false;
  }
}

function elementsFromPoint(x, y) {
  var elements = [];
  var display = [];
  var item = document.elementFromPoint(x, y);
  while (item && item !== document.body && item !== window && item !== document && item !== document.documentElement) {
    elements.push(item);
    display.push(item.style.display);
    item.style.display = "none";
    item = document.elementFromPoint(x, y);
  }
  // restore display property
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = display[i];
  }
  return elements;
}

function getDetails(el) {
  const ret = [];
  ret.push(`left=${el.offsetLeft},top=${el.offsetTop}`);
  ret.push(`Visible: ${jQuery(el).is(':visible')}, offsetWidth=${el.offsetWidth}, height:${el.offsetWidth}`);
  ret.push([el.tagName, el.id, el.attributes, el.classList]);
  return ret;
}

const handler = e => {
  let logo = document.getElementById("logo");
  console.log(`Event ${e.type}: `);
  targets.forEach(target => {
    let el = jQuery(target)[0];
    var visible = jQuery(target).is(':visible');
    const elems = elementsFromPoint(logo.offsetLeft, logo.offsetTop);
    console.log(`${target} is now ${visible ? "visible" : "hidden"} at ${logo.offsetLeft},${logo.offsetTop} by `, elems);
  });
  const details = [];
  while (logo) {
    details.push(getDetails(logo));
    if (logo.id === "page-container") break;
    logo = logo.parentNode;
  }
  console.log(`Parents of logo: `, details);
};

setTimeout(() => handler({ type: "timer " + (i + 1) + "s" }), 8000);
setTimeout(() => handler({ type: "timer " + (i + 1) + "s" }), 12000);

//jQuery
// jQuery(window).on("DOMContentLoaded load resize scroll", handler);

console.log(`Ready State: ${document.readyState}`);
document.addEventListener("readystatechange", () => console.log(`Ready State: ${document.readyState}`));