H5W3
当前位置:H5W3 > 其他技术问题 > 正文

react使用定时器定时切换图片,当图片第一次全部加载完成之后,不让其再重复加载

`

renderRadar = () => {
clearInterval(radarTimer);
if (this.state.isPlayRadar) {
radarTimer = setInterval(() => {
this.setState({
radarImg: images[this.currentIndex],
craImg: this.currentIndex === 0 ? convection['iso'][0].imgUrl : convection['iso'][Math.ceil(this.currentIndex/10)-1].imgUrl
})
if (this.currentIndex < images.length-1) {
this.currentIndex += 1;
} else {
this.currentIndex = 0;
}
}, 200)
}
}

`
render
`

<div style={{padding: '20px'}}>
<img style={{width: '50%',margin: 0}} src={radarImg} alt='radar' onError={e => e.target.src = ErrorImg}/>
<img style={{width: '50%',margin: 0}} src={craImg} alt='再分析' onError={e => e.target.src = ErrorImg}/>
</div>

`
当图片都加载完成之后再调用定时器不让其重新加载,让其根据缓存的图片进行定时切换

回答

每次都在改变图片地址相当于重新渲染这个图,肯定会重新加载这个img

为什么不写成轮播的形式呢?

本文地址:H5W3 » react使用定时器定时切换图片,当图片第一次全部加载完成之后,不让其再重复加载

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址