你是否好奇 Medium 是如何加载图片的?或许,你已经注意到图片是分多个步骤加载渲染的。首先,显示一张模糊版本的图片,然后,用全尺寸的图片替换掉。
Medium 如何加载图片
直到图片进入可是范围才加载图片
然后,加载一张模糊的缩略图
然后,加载全尺寸图片,并替换掉缩略图
我们可以把图片加载技术分为两个不同的功能。
1. 懒加载
懒加载是在页面加载时延迟加载非关键资源的一种技术。那些,非关键的资源按需加载。对于图片,非关键通常代表着屏幕外 — developers.google.com
懒加载是一种非常好的技术,它可以明显提升网站的性能。
想象一下,你写了一篇 10 分钟长的博客,里面有 20 张高分辨率图片。如果,这些图片一次性加载,博客将会变得很慢。通过,懒加载我们可以按需加载。无论内容有多少,我们只渲染那些用户看到即可。
2. 模糊处理
为了更快的显示内容,我们需要显示一张模糊了的小图并放大到全尺寸。当全尺寸的图片加载完,然后替换掉它。
如果,你之前用过 Gatsby,你应该用过 gatsby-image。它为我们提供上面提到的技术,并不需要自己实现。
但是,作为一个开发者,我喜欢自己实现。
我们来实现它
首先,我们分析下问题
我们需要知道哪些图片进入了可视范围
一旦图片进入可视范围,我们需要加载缩略图和全尺寸图片
一旦全尺寸的图片加载完成,我们需要替换掉缩略图
在加载图片时,我们要保证页面不能抖动。我们占位的容器大小应该和最终图片的大小保持一致
我们开始
我们先用 create-react-app 创建一个 React 应用的骨架。
npx create-react-app progressive-images
复制代码
我们将会使用 Unsplash 中的图片。我使用 Unsplash API 获取了最新的 10 张图片。并它们保存在 Github Gist 中。
把 gist 的内容复制到名为 images.json 的文件中。
打开 App.js 并用以下的内容替换掉它。
import React from "react";
import images from "./images.json";
import ImageContainer from "./components/image-container";
import "./App.css";
funct