Intersection Observer API：回调 function 未在交叉路口触发

Question

有一个用于延迟加载的 Vue 自定义指令

 export default {
    mounted: el => {
      function loadImage() {
        console.log("loadImage called!")
        el.src = el.dataset.src
      }

      //loadImage();
  
      function handleIntersect(entries, observer) {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            loadImage();
            console.log("loadImage called! from handleIntersect")
            observer.unobserve(el);
          }
        });
      }

      function createObserver() {
        const options = {
          root: null,
          threshold: 0
        };  
        const observer = new IntersectionObserver(handleIntersect, options);
        observer.observe(el);
      }

      if (window["IntersectionObserver"]) {
        createObserver();
      } else {
        loadImage();
      }
    }
  };

在本地注册在 Vue 3 组件中

<template>
    <figure>
      <img :data-src="src" @load="imageLoaded = true" v-show="imageLoaded">
     <Skeletor height="160" v-if="!imageLoaded"/>
    </figure>
    
</template>
<script>
import lazyload  from "../../../directives/lazyload"
export default {
  
  ...
  directives: {
    lazyload
  },
  data() {
    return {
      imageLoaded: false
    }
  }

}
</script>

回调 function handleIntersect不会在 Intersection 上触发，当我在 DevTools 中检查图像时，图像始终具有带有图像 url 的 data-src

但是，当我在指令中取消注释调用loadImage() function 时，首先它被每个元素（总共 144 个）调用，然后我看到当图像进入视口时，回调 function handleIntersect调用了loadImage() 。

下面的示例在视口中有 3 个图像

代码有什么问题？ 为什么一旦对所有元素触发 loadImages 并且在评论时根本不触发回调 function 在 Intersection 上调用（控制台显示没有“调用 loadImage 的 output？”）？

感谢任何支持！

Answer 1

未触发事件的原因是img的宽度/高度为零，或者只是简单地为 Intersection Observer 设置了不存在（DevTools 显示 style='display: none;'）。 当我在自定义指令中取消注释 loadImage() 时，它变得可见并且事件被触发。

解决方案是将 v-lazyload 移动到 figure 并通过 img 标签搜索 custome 指令中的目标元素，以便该 figure 始终托管一个骨架（来自 vue-skeletor 包的组件）