react图片预加载

道阻且长，行而不辍，未来可期

图片预加载的原理：new一个image对象，用这个对象加载图片，等这个对象将这个图片请求完后，再将这个图片放入原本应该放置的位置

代码如下：

import React, { useEffect, useState } from 'react';const ImagePreloader = ({ src }) => {const [isLoading, setIsLoading] = useState(true);const [isError, setIsError] = useState(false);useEffect(() => {//new一个image对象，用这个对象加载图片const image = new Image();image.src = src;//图片加载完成image.onload = () => {setIsLoading(false);};//图片加载错误image.onerror = () => {setIsLoading(false);setIsError(true);};return () => {// 清除事件处理程序以避免内存泄漏image.onload = null;image.onerror = null;};}, [src]);return (<div>{isLoading ? (<div>Loading...</div> // 可根据需求自定义加载时的显示内容) : isError ? (<div>Error loading image</div> // 图片加载错误时的显示内容) : (<img src={src} alt="Preloaded" />//等图片加载完成后，再把图片赋值给组件中的img)}</div>);
};export default ImagePreloader;

骨架屏

图片预加载的时候，可以使用骨架屏做加载效果
使用padding-top:100%给图片的高度做占位
简单的骨架屏效果

.imgLoading {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(90deg,rgba(190, 190, 190, 0.2) 25%,rgba(129, 129, 129, 0.24) 37%,rgba(190, 190, 190, 0.2) 63%);background-size: 400% 100%;animation: skeleton-loading 1.4s ease infinite;}@keyframes skeleton-loading {0% {background-position: 100% 50%;}100% {background-position: 0 50%;}}