HTML5+CSS3+JS小实例：图片懒加载
发布时间：2026/6/29 22:24:32
在包含大量图片的网页中，如果一打开页面就加载所有图片，不仅首屏白屏时间长，还会白白浪费用户的流量。这时候“懒加载（Lazy Load）”就派上用场了——只有当图片滚动到可视区域时，才去请求真实的图片资源。今天我们就用原生 HTML+CSS+JS，结合现代浏览器提供的IntersectionObserverAPI，手搓一个带淡入动画的图片懒加载效果。先上效果：核心思路传统的懒加载通常需要监听scroll事件，然后不断计算图片距离视口顶部的距离，这种方式性能开销很大。而IntersectionObserver是浏览器原生提供的“交叉观察器”，它能异步地监听目标元素与祖先元素（或视口）的交叉状态。简单来说，就是浏览器帮你盯着，只要图片一进入可视区域，就立刻通知你，既优雅又高效。几个值得注意的细节1. 占位与真实地址分离在 HTML 结构中，真实的图片 URL 并没有直接写在src属性里，而是存在了自定义属性data-src中。src留空，这样
)
