Skip to content

图片懒加载解决方案

为什么使用图片懒加载?

为了性能。如果你要访问

我们在讲 浏览器的页面生命周期 中曾经说过:

DOMContentLoaded:浏览器已完全加载完 HTML,并构建了 DOM 树,但像图片、样式表之类的外部资源可能尚未加载完成

load:浏览器不仅加载完成了 HTML,还加载完所有的外部资源:图片、字体、样式等

我们要让图片小,一是压缩图片,还有些方法如换图片格式,比如 Google 提出的 WebP,

还有例如图片懒加载

一个页面如果一开始就加载整个站的图片无疑会花很多时间,那么我们通过一些手段,用 placeholder 来代替图片,或者用小图来代替,等

视图内看到的图片可以第一时间显示,没看到的先不用展示

图片的加载权重比较高,会让页面卡顿

resource-priority

最简单的实现——以小换大

最开始是小图片或 placeholder 图,等图片加载完毕后换成大图

小图所花的时间少,马上就能显示出来,然后通过 JS 显示原来的图

监听图片高度

最开始展示页面范围内的图片,然后往下滑再逐步展示图片

在这里也要做节流

主要技术点:节流 + 当前元素 offsetTop

Intersection Observer

它是什么

它的语法是怎么样

怎么用这个实现图片懒加载

以实养战

我们已经用 JS 来实现了图片懒加载,但是这还不够。因为现在的项目基本基于 React/Vue 框架实现,我们来用 React 来实现一下图片懒加载

图片 API

申请 unsplash API 的使用,

自定义 Hooks

自定义 Intersection Observer Hooks

参考佳作

看别人怎么做的? medium 如何加载图片

  • 直到图片进入可是范围才加载图片

  • 然后,加载一张模糊的缩略图

  • 然后,加载全尺寸图片,并替代调缩略图

Github 地址

线上 demo

参考资料