react css里面有图片,React 中渐进式加载图片

你是否好奇 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