如何在 DOM 中出现 img-tag 或 src-attribute 发生变化时触发 JavaScript 或者：将 Wheelzoom 添加到 h5ai

Question

几天来，我一直在努力弄清楚一些事情，但我无法让它发挥作用 - 也许有人可以提供帮助。

我的（全球）目标：我正在尝试向 php-web-server-index-tool h5ai的图像查看器添加“鼠标滚轮缩放”。

我的想法是如何做到这一点：我找到了工具“ Wheelzoom ”，它增加了缩放到页面上每个 img-tag 的可能性，而无需通过仅做两件事来更改 DOM：

1. 链接到页面上的 wheelzoom.js
2. 在页面加载后调用“ wheelzoom(document.querySelectorAll('img#pv-content-img')); ”

使用 h5ai，我可以插入 JavaScript，方法是将它放在“ext”文件夹中并将其添加到选项中。json - 这会向 header 添加一个脚本标签； 所以加载 wheelzoom.js 没问题。

但我正在努力处理命令“ wheelzoom(document.querySelectorAll('img#pv-content-img')); ”。 到目前为止，我把它放在一个 extra.js 文件中，也在 header 中调用它。但我需要更频繁地触发它：

h5ai 在 DOM 中始终有一个空的<div id=pv-overlay> 。 只有当你点击一个图像文件名时，它才会用“ <div id=pv-container><img id=pv-content-img src=""...> ”填充它，改变图像的 src-attribute单击“后退/前进”。 （你可以在这里查看我的项目，现场观看）

如何在 img-tag 出现和/或 src-attribute 更改后触发 wheelzoom-command？ 我尝试了很多，现在是这样的：

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
});

但是经过我所有的尝试——要么我遇到了一个导致网站崩溃的循环，要么它根本没有被触发（就像上面的版本）。

现在我想知道：我的想法可能吗？ 在不修改h5ai源码的情况下有没有更好的办法？ 当我使用浏览器控制台并在加载图像后输入命令时，它工作得很好！

谢谢你的帮助！

编辑 2022/11/15 - 我的最后一个版本，遗憾的是仍然无法正常工作：

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

您可以观察容器，当一个新元素弹出时，您可以在该容器内搜索图像，然后在其上调用 wheelzoom。

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 });
});