Javascript Vue 3指令–；如何将项目数组推送到指令

由于Vue 3没有

IntersectionObserver

库，我想实现我自己的小解决方案

我读过指令，从我的理解来看，这是正确的方向。（？）

我的本地指令：

directives: {
    'lazyload': {
      mounted(el) {
        if ('IntersectionObserver' in window) {        
          let intersectionObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach((entry) => {
              if (entry.isIntersecting) {
                const lazyImage = entry.target;
                
                // set data-srcset as image srcset
                lazyImage.srcset = lazyImage.getAttribute('data-srcset');
                
                // add class after image has loaded
                lazyImage.addEventListener('load', () => {
                  lazyImage.classList.add('is-lazyloaded');
                };
                // unobserve after
                lazyLoadItemObserver.unobserve(lazyImage);
              }
            });
          });
          
          // observe every image
          const lazyLoadItems = document.querySelectorAll('[lazyload]')
          
          lazyLoadItems.forEach((lazyImage) => {
            lazyLoadItemObserver.observe(lazyImage);
          });
  
        }
      }
    }
  }

通常的方法是将每个

元素（例如，具有

属性的
）组成一个数组。我不懂的是如何将每个具有
v-lazyload
绑定的
生成一个数组

类似于“如果此映像具有v-lazyload绑定，请将其放入IntersectionObserver的数组。”但我可能理解错误

因此，我想提出一个指令，它设置一个
IntersectionObserver
，它观察所有具有
v-lazyload
绑定的图像数组。
v-lazyload
指令将已经在目标元素上，因此无需查询文档

在指令的
mounted
hook中，如果父节点不存在，可以将
IntersectionObserver
实例附加到父节点。然后，使用该实例观察目标元素（同时在
未安装的
中观察该元素）：

指令：{
已安装（el）{
el.parentNode.lazyLoadItemObserver=el.parentNode.lazyLoadItemObserver | |新的IntersectionObserver（/*…*/）
el.parentNode.lazyLoadItemObserver.observe（el）
},
卸载（el）{
el.parentNode.lazyLoadItemObserver.unobserve（el）
},
}

嗨，托尼，谢谢你的演示和真知灼见！但问题是，我想避免每个图像元素都有一个单独的相交观测者，但根体元素上有一个相交观测者，它观察每个具有lazyload指令的图像。然后，您可以使用我概述的相同方法，但不要使用
el.parentNode
，而是使用
document.body
。啊，是的。我的问题是，在我的代码中，它为每个图像创建了一个IntersectionObserver，因为我没有检查是否已经存在像您这样的图像。谢谢，祝你新年快乐！