为了提高页面用户体验,懒加载是一项历史悠久的技术,之前一般通过 Intersection Observer API (或者更古老的 getBoundingClientRect 方法)结合监听 scroll、resize 等事件来实现。
鉴于这个技术的通用性,也诞生了很多专门做懒加载的第三方开源库,比如 lazysizes、lozad、lazyload.js 等等,大部分项目直接安装使用即可。
其实从 Chrome 67+ 就已经原生支持懒加载特性了(包括基于 Chromium 的 Edge 和 Opera),Firefox 也很快跟进支持,Safari 也在开发中了。这就是新的 loading HTML 属性,而且这个特性同时支持图片和 iframe 两类资源。
基本用法
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
<iframe src="https://example.com" loading=&#