Intersection Observer配置错，懒加载失效！

博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》Intersection Observer配置错懒加载失效目录凌晨三点改懒加载图片死活不加载。元素明明在屏幕里控制台没报错以为是网络问题。一查代码发现Intersection Observer配置写成狗。核心根源rootMargin设成-50px但root没写。导致计算逻辑崩了。rootMargin是相对于root的偏移量。root默认是视口viewport-50px意思是元素要移出视口50px才触发。但元素在视口内时isIntersecting始终false。懒加载直接失效。错误代码真实踩坑现场constobservernewIntersectionObserver((entries){entries.forEach(entry{if(entry.isIntersecting){// 这里永远进不来entry.target.srcentry.target.dataset.src;}});},{rootMargin:-50px// 重点负值坑死人});正确代码秒级修复constobservernewIntersectionObserver((entries){entries.forEach(entry{if(entry.isIntersecting){// 元素在视口内触发constimgentry.target;img.srcimg.dataset.src;// 图片地址在data-src属性img.onload()observer.unobserve(img);// 加载完移除观察}},{root:null,// 显式写null避免歧义默认就是null但写上更安全rootMargin:0px// 0px是黄金标准别乱设负值});为什么0px最安全rootMargin: 0px元素进入视口时触发懒加载需求。-50px元素移出视口50px才触发完全反了。root不设默认是视口。设root为null才是标准用法。避坑总结rootMargin别碰负值。0px起步调成50px才加偏移。root必须写null即使默认是null。代码可读性拉满避免后续坑。加载完记得unobserve。不移除会反复触发CPU哭死。测试时先用rootMargin: 0px。别一上来就整花活。调试时差点把键盘砸了。懒加载不是魔法配置错了图片就和你玩消失。记住Intersection Observer的rootMargin是偏移量不是触发距离。下次写代码先写root: null, rootMargin: 0px再加细节。省时省力。字数688