如何在img标签出现或src属性变化时触发JS？为h5ai添加Wheelzoom

可行实现代码 #

document.addEventListener('DOMContentLoaded', () => {
  // 定位页面始终存在的overlay容器
  const overlay = document.getElementById('pv-overlay');
  if (!overlay) return;

  const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => {
      const targetImg = document.getElementById('pv-content-img');
      // 仅对未初始化的图片执行绑定
      if (targetImg && !targetImg._wheelzoomInit) {
        targetImg._wheelzoomInit = true;
        wheelzoom(targetImg);

        // 监听图片src变化，切换图片时重新绑定缩放逻辑
        const srcObserver = new MutationObserver(() => {
          // 销毁旧实例（Wheelzoom原生支持destroy方法）
          if (targetImg.wheelzoom) targetImg.wheelzoom.destroy();
          wheelzoom(targetImg);
        });
        srcObserver.observe(targetImg, { attributes: true, attributeFilter: ['src'] });
      }
    });
  });

  // 监听overlay的所有子元素及子树变化
  observer.observe(overlay, { childList: true, subtree: true });
});

原代码问题分析 #

1. 选择器错误：document.querySelector("pv-container") 缺少ID选择符#，且初始状态下#pv-container不存在，导致Observer从未启动
2. 监听范围不足：仅监听childList但未开启subtree，无法捕获深层DOM的创建事件
3. 重复初始化：没有标记已处理的图片，重复调用wheelzoom会导致逻辑冲突甚至循环崩溃
4. 未处理图片切换：点击前后按钮修改src时，未重新绑定缩放逻辑，导致切换后功能失效

关键优化点 #

• 以页面加载时就存在的#pv-overlay为监听目标，确保Observer从启动时就生效
• 用自定义属性_wheelzoomInit标记已初始化的图片，避免重复绑定
• 单独监听图片src属性变化，确保切换图片后缩放功能正常工作
• 使用DOMContentLoaded时机启动监听，更早捕获DOM变化

内容的提问来源于stack exchange，提问作者webwurm