本文主要介绍react实现图片加载的三个阶段，加载失败完成。它通过使用加载图片来发生。具体的原理分析和实现代码是边肖通过这篇文章学习到的。
最近博客写道，在项目列表中，发现这里有很多图片，刚开始加载会比较慢，后来想用一个加载图片来占地方。同时，如果图像加载失败，在不显示原始错误的情况下，显示错误的图像会很难看。
效果
原理解析
这是一个组件，一个图片显示的组件。直接改img标签的url地址就行了。是的，它是。如果您直接在vue中更改地址，vue将会有相应的更新数据。
图片的事件
图中有很多事件，比如onload，onerror等。图片一加载，就会调用onload事件，无论加载成功还是失败都会调用这个方法。onerror方法在图片未显示时调用此方法。从这两种方法的对比可以知道，一开始需要使用onload来加载图片，图片可以成功也可以失败。
组件代码
从“react”导入{ imghtml attributes }；
/**
*图像占位符组件属性
*/
导出接口IImagPropsT扩展了ImgHTMLAttributesT {
/**
*加载图片
*/
正在加载？字符串，
/**
*无法加载图片
*/
错误Img？字符串，
/**
*图片通常显示的地址。
*/
src:字符串
}
从“react”导入React，{ useState }
//下面两张是导入的默认图片。
从'导入加载。/./././assets/imgs/loading/load . gif '；
从'导入错误Img。/./././assets/imgs/loading/error.png '
导出默认函数Img(props: IImagPropsany) {
//图片地址
const [src，setSrc]=use state(props . loading img as string)
//是第一次加载吗？如果你不用这个，它会加载两次。
const [isFlag，setIsFlag]=useState(false)
/**
*图像加载完成。
*/
const handleOnLoad=()={
//判断是否是第一次加载。
if (isFlag)返回；
//创建一个img标记
const img DOM=new Image()；
img DOM . src=props . src；
//图像加载完成。使用普通图像。
imgDom.onload=function () {
setIsFlag(true)
setSrc(props.src)
}
//图像加载失败。使用图像占位符
imgDom.onerror=function () {
setIsFlag(true)
setSrc(props.errorImg作为字符串)
}
}
返回(
img src={src}
onLoad={handleOnLoad}
style={{
高度：'继承'，
}}
/img
/
)
}
//设置图像加载中的默认样式和失败的图像。
Img.defaultProps={
正在加载：正在加载，
错误信息：错误信息
}
PS:先来看看img图片在React加载之前的加载效果。
我在React里有这样一个要求，就是我要在图像加载之前一直显示加载动画效果，然后在图像加载之后才能渲染图像。
先说具体思路，再说实际应用。
实施思路：
//假设我想加载这三个web图像
var img list=[' http://example . com/demo 1 . png '，' http://example.com/demo2.png '，' http://example.com/demo3.png']
//图像使用用于存储加载的图片的。
var images=[]
imglist.forEach(el={
var image=新图像()
image.src=el
image.onload=function(){
//说明图片的图像已经加载。
//将加载的图像添加到图像中
images.push(图像)
}
})
//组件渲染时做出判断
if(images.length===3){
//说明此时三张web图片都已经加载完毕，可以渲染了。
//渲染加载的图片
}否则{
//说明此时网页图片还没有完全加载，然后加载动画效果就来了。
//加载动画效果
}
实施的具体例子
从“react”导入React
从“antd”//使用antd导入{carousel，spin}
//创建Home组件
类主页扩展反应。组件{
施工员(道具){
超级(道具)
this.state={
imglist: [
{
id:“01”，
src:' http://example . com/demo 1 . png '，
'替代：'演示1 '
},
{
id:“02”，
src:' http://example . com/demo 2 . png '，
备选："演示2"
},
{
id:“03”，
src:' http://example . com/demo 3 . png '，
替代："演示3"
}
],
图片：[]
}
}
UNSAFE_componentWillMount(){
//在渲染之前进行操作
var { imglist }=this.state
var images=[]
imglist.forEach(el={
var图像=新图像()
image.src=el.src
image.onload=()={
图片推送(图像)
this.setState({
形象
})
}
})
}
render(){
var { imglist，images }=this.state
if(images.length===3){
//说明三张图片已经全部加载完成，这个时候已经可以渲染图片了
返回（
div className='common-body '
转盘自动播放
{imglist.map(el=(
img src={ El。src } key={ El。id } alt={ El。alt }/
))}
/旋转木马
/div
)
}否则{
//说明图片还没有全部加载完成，这个时候要显示装货动画效果
返回（
'公共装载'
旋转提示='正在加载.'size=' large '/旋转
/div
)
}
}
}
导出默认主页
这个方法还是比较好用的
以上就是反应实现图片正在加载中加载完成加载失败三个阶段的原理解析的详细内容，更多关于反应图片加载完成的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。