老的懒加载靠 scroll 事件加 getBoundingClientRect 手动计算，频繁触发布局读取非常耗性能。IntersectionObserver 交给浏览器在合适时机回调：创建观察者时传入阈值（threshold）与根容器，元素进入/离开视口时异步通知，回调里拿 isIntersecting 与 intersectionRatio。
最典型用途是图片懒加载（img 的 data-src 在进入视口时赋给 src）与列表无限滚动。回调触发后 unobserve 取消观察避免重复；配合 rootMargin 可以提前一段距离预加载，过渡更自然。旧版本 IE 不支持但已有广泛 polyfill，新项目可放心使用。
var ob = new IntersectionObserver(function (entries) { entries.forEach(function (en) { if (en.isIntersecting) { var img = en.target; img.src = img.getAttribute('data-src'); img.onload = function () { img.style.opacity = 1; }; ob.unobserve(img); } }); }, { rootMargin: '100px' }); // 监听所有带 data-src 的图片 var imgs = document.querySelectorAll('img[data-src]'); imgs.forEach(function (img) { ob.observe(img); }); <!-- 配合这样的 HTML： <img data-src="https://picsum.photos/320/180" style="opacity: 0; transition: opacity .4s"> -->