背景
在处理一个对清晰度要求较高的页面时,由于可渲染的图片达到了3840 * 10k的分辨率,所以前端这边在接收到活动页面的图片会相当大(2MB起步的),然后就会出现一个图片缓慢从上到下渲染的过程动画,对于C端的产品,这种交互一定是不及格的
如下:
load-image
目的
处理掉视频中的加载过程,其实在此过程中,发出了图片链接请求,所以缓慢的加载出来【当然大资源的图片才会明显】
思路
让资源预先加载完成,然后我们直接把加载好的图片插入到页面中
解决方案
顺着以上的思路,那我们用代码的形式表示就是
这里还是要说明下,以下的处理方式适合博主自己的场景,大家可以把该功能套进去自己的实际场景使用,我是刚好碰到在当前页面要加载,如果大家的资源是可以在空闲时间加载(这样更完美),那可以考虑加入store来管理已经加载好的图片资源,在适当的时候插入页面节点就可以了
function LoadImage() {const [imgContent, setImg] = useState<HTMLImageElement>();const imgRef = useRef<HTMLDivElement>(null);useMount(async () => {const img = await previewLoadImg(testUrl);setImg(img);});// 这里留个todo 因为并不是所有情况都会使用的// todo: 如果当前加载的图片会更新的话,需要个remove方法,来清除已经插入的img节点useEffect(() => {imgRef.current && imgContent && imgRef.current.appendChild(imgContent);}, [imgRef, imgContent]);return (<div className="load-image"><div ref={imgRef}></div></div>);
}
utils.ts
/*** 预加载图片* @param {string} url 图片url*/
export function previewLoadImg(url: string): Promise<HTMLImageElement> {return new Promise((resolve, reject) => {const img = new Image();img.src = url;img.onload = function () {resolve(img);};img.onerror = function () {reject(new Error(`${url}加载失败`));};});
}// 很多时候我们会批量处理图片,这里也给大家一个批次的方法
/** 批量预加载图片 */
export async function batchPreviewLoadImg(urlList: string[]) {const imgList = await Promise.allSettled(urlList.map((url) => previewLoadImg(url)));return imgList.map(item => ({status: item.status,value: item.status === 'fulfilled' ? item.value : item.reason}));
}
写在最后
如果觉得该篇幅帮助到了大家,记得给用心的博主点个赞,让他知道开心开心,有你们的支持是我更新下去的最大动力!