如何在 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 });
});