HTML5+CSS3+JS小实例：图片懒加载

在包含大量图片的网页中，如果一打开页面就加载所有图片，不仅首屏白屏时间长，还会白白浪费用户的流量。这时候“懒加载（Lazy Load）”就派上用场了——只有当图片滚动到可视区域时，才去请求真实的图片资源。

今天我们就用原生 HTML+CSS+JS，结合现代浏览器提供的 IntersectionObserver API，手搓一个带淡入动画的图片懒加载效果。

先上效果：

核心思路

传统的懒加载通常需要监听 scroll 事件，然后不断计算图片距离视口顶部的距离，这种方式性能开销很大。

而 IntersectionObserver 是浏览器原生提供的“交叉观察器”，它能异步地监听目标元素与祖先元素（或视口）的交叉状态。简单来说，就是浏览器帮你盯着，只要图片一进入可视区域，就立刻通知你，既优雅又高效。

几个值得注意的细节

1. 占位与真实地址分离
在 HTML 结构中，真实的图片 URL 并没有直接写在 src 属性里，而是存在了自定义属性 data-src 中。src 留空，这样