道阻且長，行而不輟，未來可期

圖片預加載的原理：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 () => {// 清除事件處理程序以避免內(nèi)存泄漏image.onload = null;image.onerror = null;};}, [src]);return (<div>{isLoading ? (<div>Loading...</div> // 可根據(jù)需求自定義加載時的顯示內(nèi)容) : isError ? (<div>Error loading image</div> // 圖片加載錯誤時的顯示內(nèi)容) : (<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%;}}