Intersection Observer回调未触发：Vue3懒加载指令故障排查

核心问题 #

你代码里有两个致命问题导致回调handleIntersect永远不执行：

1. 目标图片初始是display: none状态
   组件里的<img>用了v-show="imageLoaded"，而imageLoaded默认是false，这会让图片一开始就被隐藏。Intersection Observer API不处理display: none的元素——这类元素不在浏览器的渲染树里，根本不会触发交叉检测，自然不会调用你的回调。

2. 指令没绑定到图片上
   看你贴的组件模板，<img>标签根本没加v-lazyload指令！如果没绑定，指令的mounted钩子根本不会运行，Intersection Observer实例都创建不了，回调更不可能触发。要是你实际代码里加了这条指令，那第一条就是核心原因。

为什么取消注释loadImage()后反而能触发回调？ #

当你手动调用loadImage()时：

• 指令mounted执行时直接给图片设置了src，触发了@load事件，imageLoaded变成true，图片从display: none转为正常显示。
• 这时候图片进入了渲染树，Intersection Observer就能正常监听它的交叉状态了，所以后续滚动时元素进入视口，回调就会被触发。

修复方案 #

方案1：调整图片显示逻辑（推荐） #

别用v-show初始隐藏图片，改用骨架屏覆盖或者透明占位的方式：

<template>
  <figure style="position: relative;">
    <!-- 初始透明，加载后显示 -->
    <img :data-src="src" v-lazyload @load="imageLoaded = true" style="opacity: 0; transition: opacity 0.3s;">
    <!-- 骨架屏绝对定位覆盖在图片上 -->
    <Skeletor height="160" v-if="!imageLoaded" style="position: absolute; top: 0; left: 0; width: 100%;"/>
  </figure>
</template>

然后在指令的loadImage里加上显示逻辑：

function loadImage() {
  console.log("loadImage called!")
  el.src = el.dataset.src
  el.style.opacity = '1'
}

方案2：监听元素显示状态（适合必须保留v-show的场景） #

如果一定要用v-show，可以在指令里用MutationObserver监听图片的显示状态，等图片显示后再创建Intersection Observer：

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

    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);
    }

    // 检查元素是否显示
    const checkVisibility = () => {
      const isVisible = window.getComputedStyle(el).display !== 'none';
      if (isVisible && window.IntersectionObserver) {
        createObserver();
        // 停止监听样式变化
        styleObserver.disconnect();
      }
    };

    // 初始检查一次
    checkVisibility();
    // 监听元素style属性变化
    const styleObserver = new MutationObserver(checkVisibility);
    styleObserver.observe(el, { attributes: true, attributeFilter: ['style'] });

    // 降级处理
    if (!window.IntersectionObserver) loadImage();
  }
};

必做：绑定指令到图片 #

不管用哪个方案，都要给<img>加上v-lazyload指令，否则指令完全没用：

<img :data-src="src" v-lazyload @load="imageLoaded = true">

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