JavaScript 方案实现图片的懒加载 首先,回顾一下过往最常见的,使用 JavaScript 方案实现图片的懒加载。
通过 JavaScript 实现的懒加载,主要是两种方式:
监听 onscroll 事件,通过 getBoundingClientRect API 获取元素图片距离视口顶部的距离,配合当前可视区域的位置实现图片的懒加载
通过 HTML5 的 IntersectionObserver API,Intersection Observer(交叉观察器) 配合监听元素的 isIntersecting 属性,判断元素是否在可视区内,能够实现比监听 onscroll 性能更佳的图片懒加载方案