图片懒加载技巧：opacity与transition实现渐现效果

本文深入剖析了图片懒加载的本质与常见误区，明确指出仅靠opacity和transition实现的“渐显”并非真正的懒加载——因为图片资源早在页面加载时就已下载，完全无法节省带宽或优化首屏性能；真正的懒加载核心在于延迟设置img的src属性直至其进入视口，并结合IntersectionObserver精准触发、CSS过渡平滑呈现，同时强调占位处理、宽高预留、加载状态管理等关键细节，帮助开发者避开渲染异常、动画失效、兼容性缺失等典型陷阱，让懒加载既高效又优雅。

图片懒加载为什么不能只靠 opacity + transition

单纯用 opacity 和 transition 实现“渐显”不是真正的懒加载，它只是视觉动效——图片资源在页面加载时就已发出请求（src 已写死），浏览器会提前下载所有图片，完全没节省带宽或提升首屏性能。真正懒加载的核心是：**延迟设置 src（或 srcset）直到图片进入视口**，再配合透明度过渡实现淡入效果。

用 IntersectionObserver 触发 src 设置 + opacity 过渡

现代方案应结合 IntersectionObserver 检测可见性，避免频繁监听 scroll。关键点在于：初始用占位属性（如 data-src）存真实地址，进入视口后再赋值给 src，同时移除隐藏类触发 CSS 过渡。

• HTML 中用 ，不设 src
• CSS 定义默认隐藏态和过渡：

  .lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  .lazy.loaded {
    opacity: 1;
  }

• JS 监听并加载：

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.add('loaded');
        observer.unobserve(img); // 加载完即停止观察
      }
    });
  });
  document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));

为什么 transition 不生效？常见 CSS 坑

即使 JS 正确设置了 src 和 loaded 类，动画也可能卡住或跳变。原因常出在以下几点：

• img 元素默认是 inline，而 transition 对 inline 元素的 opacity 虽然支持，但若父容器有 overflow: hidden 或图片未设定宽高，可能触发渲染异常
• 图片加载完成前，元素高度为 0，opacity 变化不可见；必须确保容器有占位（如 aspect-ratio、padding-top 百分比或固定 height）
• 如果使用 background-image 替代 ，需注意 background-image 不触发 load 事件，且 opacity 作用于整个元素，不是背景本身

兼容性与降级：没有 IntersectionObserver 怎么办

IE 完全不支持 IntersectionObserver，旧版 Safari 也需 polyfill。若必须兼容，可用 getBoundingClientRect() + scroll 事件模拟，但要注意节流和性能：

• 用 throttle 包裹 scroll 回调（如 Lodash 的 throttle(fn, 100)）
• 每次滚动检查 img.getBoundingClientRect().top < window.innerHeight 且 top > 0（确保在视口内）
• 加载后从待检查列表中移除该 img，避免重复执行
• 更稳妥的做法是引入官方 polyfill：

真正起作用的是 src 的延迟设置时机，opacity 过渡只是锦上添花；漏掉占位、不处理加载失败、忽略宽高塌陷，都会让这个“渐显”看起来像 bug 而不是动效。

今天关于《图片懒加载技巧：opacity与transition实现渐现效果》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！