道阻且长,行而不辍,未来可期
图片预加载的原理: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;
骨架屏文章来源:https://www.toymoban.com/news/detail-685862.html
图片预加载的时候,可以使用骨架屏做加载效果
使用padding-top:100%给图片的高度做占位
简单的骨架屏效果文章来源地址https://www.toymoban.com/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模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!