HTML图片懒加载手写实现教程

本文深入解析了HTML图片懒加载的手写实现方案，指出原生`loading="lazy"`虽便捷但存在兼容性差、无法监听状态、不支持背景图及框架内图片等致命短板；重点推荐性能优异且可扩展的`IntersectionObserver`方案，并详解其正确用法——包括保存Observer引用、合理设置`rootMargin`、加载后及时取消观察及完善的错误处理；同时提供了滚动事件降级方案的防卡顿技巧，以及针对CSS背景图、``元素和React/Vue等现代框架场景的定制化实践策略，最后强调动态内容下手动触发监听的必要性，是一份兼顾原理深度与工程落地的前端性能优化实战指南。

什么是懒加载，为什么不能只靠 loading="lazy"

懒加载本质是「按需触发资源请求」，不是等页面渲染完再统一加载。现代浏览器的 loading="lazy" 对 和