Question

我有一个包含3个步骤的模态组件。在第一步中，我有一个没有循环的gif（换句话说，gif不是无限的gif）。当我打开模态时，当我回到第一步时，我希望gif重新启动动画并循环一次。

我的问题是：当我第一次显示gif时，浏览器下载gif并且gif工作正常，但之后浏览器从缓存中获取gif并且不再启动。因此，当我关闭模态并再次打开或者我再次回到第一步时，就像我有一个图像而不是gif。

限制：我不能多次下载gif，所以我不能让?a=${Math.random()强制gif再次循环。

我尝试了什么：

1）当我不在第一步并且未打开模态时，我试图将src置于img标签中。当我在第一步并打开模态时，我将gif放在img标签的src中

2）我试图做同样的事情，但是用另一个gif

3）我试图在模态组件中尝试1和2，并将src传递给step子组件

4）当我不在第一步并且没有打开模态时，我试图从DOM中删除img标签

我的简化组件：

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' />
    )
  }
}

提前致谢

Answer 1

您可以通过清除图像src然后重新设置它来重新启动非无限gif。

在reactJS中执行此操作的方法是使用组件状态和零长度超时推送到下一个滴答

＆＃13;

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")
);

＆＃13;

<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>

＆＃13;

Answer 2

我不确定这会有所帮助，但您可以使用此软件包添加环回https://www.npmjs.com/package/react-typing-animation

Answer 3

import welcomeGif from 'modules/Onboarding/assets/welcomeGif.gif'

export class FirstStep extends React.Component {

  constructor() {
    super()

    this.src = welcomeGif
  }

  render() {
    if (this.gif)
      this.gif.src = this.src

    return(
      <img
        src={this.src}
        alt='welcomeGif'
        ref={input => this.gif = input}
      />
    )
  }
}

Answer 4

这是我在div中显示的gif的实现。如果div隐藏，则gif设置为空字符串。这样可以确保每次显示div时gif都具有动画效果。

__cdecl

在React中强制gif重新加载

4 个答案: