图片懒加载解决方案
为什么使用图片懒加载？
为了性能。如果你要访问
我们在讲 浏览器的渲染原理 中曾经说过：
DOMContentLoaded：浏览器已完全加载完 HTML，并构建了 DOM 树，但像图片、样式表之类的外部资源可能尚未加载完成
load：浏览器不仅加载完成了 HTML，还加载完所有的外部资源：图片、字体、样式等
我们要让图片小，一是压缩图片，还有些方法如换图片格式，比如 Google 提出的 WebP，
还有例如图片懒加载
一个页面如果一开始就加载整个站的图片无疑会花很多时间，那么我们通过一些手段，用 placeholder 来代替图片，或者用小图来代替，等
视图内看到的图片可以第一时间显示，没看到的先不用展示
图片的加载权重比较高，会让页面卡顿
最简单的实现——以小换大
最开始是小图片或 placeholder 图，等图片加载完毕后换成大图
小图所花的时间少，马上就能显示出来，然后通过 JS 显示原来的图
监听图片高度
最开始展示页面范围内的图片，然后往下滑再逐步展示图片
在这里也要做节流
主要技术点：节流 + 当前元素 offsetTop
Intersection Observer
它是什么
它的语法是怎么样
怎么用这个实现图片懒加载
以实养战
我们已经用 JS 来实现了图片懒加载，但是这还不够。因为现在的项目基本基于 React/Vue 框架实现，我们来用 React 来实现一下图片懒加载
图片 API
申请 unsplash API 的使用，
自定义 Hooks
自定义 Intersection Observer Hooks
参考佳作
看别人怎么做的？ medium 如何加载图片
直到图片进入可是范围才加载图片
然后，加载一张模糊的缩略图
然后，加载全尺寸图片，并替代调缩略图
Github 地址
线上 demo