How to trigger JavaScript when img-tag appears in DOM or src-attribute changes Or: Adding Wheelzoom to h5ai

Question

For days now I am trying to figure out something and I can't get it to work - maybe somebody can help.

My (global) goal: I am trying to add a "zoom by mousewheel" to the image-viewer of the php-web-server-index-tool h5ai .

My idea how to do it: I found the tool " Wheelzoom " which adds the possibility to zoom to every img-tag on the page without changing the DOM by only doing 2 things:

1. linking to the wheelzoom.js on the page
2. calling " wheelzoom(document.querySelectorAll('img#pv-content-img')); " after the page has loaded

With h5ai I can insert JavaScript by placing it in the "ext"-Folder and adding it to the options.json - this adds a script-tag to the header; so no problem to get the wheelzoom.js loaded.

But I am struggling with the command " wheelzoom(document.querySelectorAll('img#pv-content-img')); ". So far I put it in an extra.js-file, also calling it in the header. But I need it to be triggered more often:

h5ai has always an empty <div id=pv-overlay> in the DOM. Only when you click on an image-filename, it fills it with " <div id=pv-container><img id=pv-content-img src=""...> ", changing the src-attribute of the image by clicking "back/forward". (You can check out my project here , to see it live)

How do I trigger the wheelzoom-command after the img-tag appears and/or the src-attribute changes? I tried a lot, now something like this:

var insertedNodes = [];
var observer = new WebKitMutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log("Change!"); //here the wheelzoom-function should be triggered
  })
});
observer.observe(document, {
  childList: true
});

But with all my trying - either I run into a loop that crashes the site, or it doesn't get triggered at all (like the version above).

Now I wonder: Is my idea possible? Is there a better way without changing the sourcecode of h5ai? When I use the browser-console and type in the command after an image is loaded-it works perfectly!

Thanks for your help!

edit 2022/11/15 - my last version, sadly still not working:

document.addEventListener('readystatechange', event => {
    switch (document.readyState) {
      case "interactive":
        console.log("document.readyState: ", document.readyState, 
          `- The document has finished loading DOM. `,
          `- "DOMContentLoaded" event`
          );
        break;
      case "complete":
        console.log("document.readyState: ", document.readyState, 
          `- The page DOM with Sub-resources are now fully loaded. `,
          `- "load" event`
          );

          const container = document.querySelector("pv-container");
          const observer  = new MutationObserver(() => container.querySelectorAll("#pv-content-img").forEach(e => wheelzoom(e)));
          observer.observe(container, { childList: true });
          break;
    }
  });

Answer 1

You can observe the container and when a new element pops in, you can search inside that container for the image and just call wheelzoom on it.

window.addEventListener("load", () => { 
    const container = document.getElementById("pv-container");
    const observer  = new MutationObserver(() => 
        container.querySelectorAll("#pv-content-img").forEach(e => 
            wheelzoom(e)));
    observer.observe(container, { childList: true });
});