我有一个包含 3 个步骤的模态组件。在第一步中，我有一个没有循环的 gif（换句话说，gif 不是无限的 gif）。当我打开模态并返回第一步时，我希望 gif 重新启动动画并仅循环一次。
我的问题是：当我第一次显示 gif 时，浏览器下载 gif 并且 gif 工作正常，但之后浏览器从缓存中获取 gif 并且不再启动。因此，当我关闭模式并再次打开或者再次返回第一步时，就好像我看到的是图像而不是 gif。
限制：我无法多次下载该 gif，因此无法放置?a=${Math.random()强制 gif 再次循环。
我尝试过的：
1）我试图将 src 清空img当我不在第一步并且模式未打开时标记。当我处于第一步并且模式打开时，我将 gif 放在 src 中img tag
2）我尝试做与第一次尝试相同的事情，但使用另一个 gif
3）我尝试在模态组件中执行与尝试1和2相同的操作，并将src传递给步骤子组件
4）我尝试删除img当我不在第一步并且模式未打开时标记出 DOM
我的简化组件：
export class Modal extends React.PureComponent {
state = { step: FIRST_STEP }
render() {
{currentStep === FIRST_STEP && this.renderFirstStep()}
{currentStep === SECOND_STEP && this.renderSecondStep()}
}
renderFirstStep() {
return <FirstStep />
}
}
export class FirstStep extends React.Component {
render() {
return (
<img src={gif} alt='gif' />
)
}
}
提前致谢
您可以通过清除图像 src 然后重新设置它来重新启动非无限 gif。
在reactJS中做到这一点的方法是使用组件状态和零长度超时来推送到下一个tick
class ReloadableGif extends React.Component {
constructor(props){
super(props)
this.state = {
gif: 'http://insightgraphicdesign.net/wp-content/uploads/2014/07/coke-responsive-logo.gif',
loaded: 'http://insightgraphicdesign.net/wp-content/uploads/2014/07/coke-responsive-logo.gif'
}
}
reloadGif = () => {
this.setState({loaded: ''})
setTimeout(() => {
this.setState({loaded: this.state.gif})
}, 0)
}
render(){
return <div>
<img src={this.state.loaded} />
<button onClick={this.reloadGif}>Replay Animation</button>
</div>
}
}
ReactDOM.render(
<ReloadableGif />,
document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<main id="react">
http://insightgraphicdesign.net/wp-content/uploads/2014/07/coke-responsive-logo.gif
</main>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
