在 react 应用中，高效的图片加载对于提供流畅的用户体验至关重要。当从外部 api（例如 unsplash api）获取图片并在应用中展示时，未经优化的图片加载可能导致页面加载缓慢，影响用户体验。本文将深入探讨如何优化 react 应用中的图片加载，特别是在使用 unsplash api 的场景下。
1. 选择合适的图片尺寸
从 Unsplash API 获取图片时，一个常见的性能瓶颈是加载了过大尺寸的图片。Unsplash API 提供了多种图片尺寸选项，开发者应该根据实际需求选择合适的尺寸。
原始代码中使用了 item.urls.full，这通常是最高分辨率的图片。对于在较小容器中显示的图片，加载如此高分辨率的图片是没有必要的，反而会浪费带宽和计算资源。
Unsplash API 提供了以下几种常用的图片尺寸：
- raw: 原始尺寸
- full: 最大尺寸
- regular: 中等尺寸
- small: 较小尺寸
- thumb: 缩略图
通过修改代码，使用 item.urls.regular 或 item.urls.small，可以显著减少图片加载时间。
<img src={item.urls.regular} alt={item.alt_description}/>建议： 在选择图片尺寸时，应根据图片在页面上的显示大小进行权衡。避免加载大于显示区域的图片，以减少不必要的资源消耗。
2. 图片懒加载
图片懒加载是一种延迟加载页面上非关键区域图片的技术。这意味着只有当图片进入用户视口时才会被加载，从而减少初始页面加载时间。
可以使用 react-lazyload 等第三方库来实现图片懒加载。
首先，安装 react-lazyload：
npm install react-lazyload
然后，在代码中使用 LazyLoad 组件包裹 img 标签：
import LazyLoad from 'react-lazyload';
{containerImgs.map(item => (
<div key={item.id} className="card">
<LazyLoad height={200} offset={100}>
<img src={item.urls.regular} alt={item.alt_description} />
</LazyLoad>
<div className='user-info'>{item.user.name}</div>
</div>
))}height 属性指定了占位符的高度，offset 属性指定了图片在进入视口多少像素时开始加载。
注意： 图片懒加载可能会影响 SEO，需要根据具体情况进行权衡。
3. 优化图片格式
图片格式也会影响加载速度。通常情况下，WebP 格式的图片比 JPEG 或 PNG 格式的图片具有更好的压缩率，可以在保证图片质量的前提下减少文件大小。
可以使用在线工具或图像处理软件将图片转换为 WebP 格式。
建议： 尽量使用 WebP 格式的图片，并确保服务器正确配置以支持 WebP 格式。
4. 图片压缩
即使选择了合适的图片尺寸和格式，对图片进行压缩仍然可以进一步减小文件大小，提高加载速度。
可以使用在线图片压缩工具或构建时工具（例如 webpack 的 image-webpack-loader）来自动压缩图片。
5. 使用 CDN
内容分发网络 (CDN) 可以将图片缓存在全球各地的服务器上，从而使用户可以从离他们最近的服务器加载图片，减少延迟。
可以将 Unsplash API 返回的图片 URL 直接指向 CDN，或者将图片上传到自己的 CDN。
6. 代码示例优化
原始代码中，getPhotos 函数在每次输入框内容改变时都会被调用，这会导致不必要的 API 请求。可以使用 debounce 或 throttle 函数来限制 API 请求的频率。
import { useState, React, useCallback } from 'react';
import debounce from 'lodash.debounce';
function App() {
const [search, setSearch] = useState('');
const [containerImgs, setContainerImgs] = useState([]);
const getPhotos = useCallback(async (searchQuery) => {
let response = await fetch(`https://api.unsplash.com/search/photos?page=1&query=${searchQuery}&client_id={APP-SECRET}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
let result = await response.json();
if (result) {
setContainerImgs(result.results);
console.log(result.results);
}
}, []);
const debouncedGetPhotos = useCallback(debounce(getPhotos, 300), [getPhotos]);
const searchInput = event => {
const searchTerm = event.target.value;
setSearch(searchTerm);
debouncedGetPhotos(searchTerm);
};
return (
<div className="container">
<input type="text" onChange={searchInput} />
<div className="images-container">
{containerImgs.map(item => (
<div key={item.id} className="card">
<img src={item.urls.regular} alt={item.alt_description} />
<div className='user-info'>{item.user.name}</div>
</div>
))}
</div>
</div>
);
}
export default App;在这个示例中，debounce 函数确保 getPhotos 函数在用户停止输入 300 毫秒后才会被调用。
总结
通过选择合适的图片尺寸、使用图片懒加载、优化图片格式、压缩图片、使用 CDN 以及优化代码，可以显著提升 React 应用中图片加载速度，改善用户体验。在实际开发中，应根据具体情况选择合适的优化策略，并进行性能测试，以确保优化效果。
