如何将medium-zoom库与lazysizes结合使用？

这个问题的核心确实是异步加载导致的节点绑定时机不对——lazysizes在后台悄悄替换/更新图片节点的时候，medium-zoom早就完成了初始绑定，自然抓不到那些后来才出现的“新鲜”图片节点。好在两个库都提供了事件钩子，我们可以利用它们来完美配合：

方案：监听lazysizes的加载完成事件，动态绑定缩放功能 #

步骤很简单，思路就是先处理页面初始存在的可缩放图片，再监听懒加载完成事件，给新加载的图片补绑缩放功能：

1. 首先初始化medium-zoom，处理页面加载时就已经存在的非懒加载图片（如果有的话）：

   // 创建一个medium-zoom实例，先绑定已有的[data-zoomable]图片
   const zoomInstance = mediumZoom("[data-zoomable]");
   

2. 监听lazysizes的lazyloaded事件，这个事件会在每一张懒加载图片成功加载并渲染完成后触发：

   document.addEventListener("lazyloaded", (event) => {
     const loadedImg = event.target;
     // 检查这张刚加载的图片是否需要缩放功能
     if (loadedImg.hasAttribute("data-zoomable")) {
       // 把新图片添加到已有的medium-zoom实例中
       zoomInstance.add(loadedImg);
     }
   });
   

为什么这个方案可行？ #

• lazyloaded事件是lazysizes官方提供的，确保触发时机是在图片完全加载、节点状态稳定之后，这时我们拿到的event.target就是最终会显示在页面上的图片节点。
• 使用同一个medium-zoom实例的add方法，既避免了重复初始化带来的性能问题，又能确保新图片继承和已有图片一致的缩放配置（比如背景色、缩放比例这些）。

如果你的场景里，懒加载的图片是通过picture元素或者其他更复杂的结构渲染的，也不用担心——lazyloaded事件的目标依然是最终的img元素，只要它带有data-zoomable属性，就能被正确绑定。

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