当img-标记出现在DOM或src-属性更改或:向h5ai添加wheel缩放时，如何触发h5ai？

Question

几天来，我一直在努力想办法解决一些事情，但我无法让它发挥作用--也许有人能帮上忙。

我的(全球)目标:我试图在php-web-server-index-工具h5ai.的图像查看器中添加一个“按鼠标缩放”。

我的想法是:我找到了工具"惠尔变焦“，它只做了两件事情，就可以放大到页面上的每个img标记，而不需要更改DOM：

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

使用h5ai，我可以插入JavaScript，方法是将其放置在"ext"-Folder中，并将其添加到options.json --这将向头部添加一个脚本-标记；因此，加载wheelzoom.js没有问题。

但我在与命令"wheelzoom(document.querySelectorAll('img#pv-content-img'));“作斗争。到目前为止，我将其放入一个额外的..js文件中，并在头文件中调用它。但我需要更经常地触发它：

h5ai在DOM中总是有一个空的<div id=pv-overlay>。只有当您单击图像文件名时，它才会填充"<div id=pv-container><img id=pv-content-img src=""...>"，通过单击“后退/转发”更改图像的src-属性。(您可以查看我的项目这里，查看它的实况)

在img-标记出现和/或src-属性更改后，如何触发轴距缩放命令？我试了很多，现在就像这样：

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