什么是预加载

提前请求图片等资源,等到真正要用的时候,直接从缓存拿,而不用发送请求,从而缩短图片显示的用时,优化用户体验

如何实现

在React中实现预加载一般借助 useEffect,在初次渲染组件时进行预加载:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
useEffect(() => {
const preloadImages = []
// 可以把 ProjectStore.imgs换成url数组...
for (let i = 0; i < ProjectStore.imgs.length; i++) {
const img = new Image()
// 将img从数组中移除,减少内存占用
img.onload = function () {
const index = preloadImages.indexOf(this)
if (index !== 1) {
preloadImages.splice(index, 1)
}
}
img.src = ProjectStore.imgs[i].url
preloadImages.push(img)
}
}, [])

这样,之后在任意页面用到这些图片资源时,都可以直接从缓存拿取,从而大大提升用户体验

踩坑

注意开发时不要勾选 Disable cache,一开始没注意被坑了…