道阻且長，行而不輟，未來可期
圖片預加載的原理：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;
骨架屏文章來源：http://www.zghlxwxcb.cn/news/detail-685862.html
圖片預加載的時候，可以使用骨架屏做加載效果
使用padding-top:100%給圖片的高度做占位
簡單的骨架屏效果文章來源地址http://www.zghlxwxcb.cn/news/detail-685862.html
.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%;
}
}
到了這里，關于react圖片預加載的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
