CODEWITHSUNDEEP
javascripthtmlcssreactjs
Marina
Marina

Reputation: 1780

Force gif reload in React

I've a modal component with 3 steps. In the first step I've a gif with no loop (in other words, the gif is NOT a infinite gif). When I open the modal and when I go back to the first step I want the gif to restart the animation and loop just one time.

My problem is: when I first show the gif, the browser download the gif and the gif works fine, but after that the browser get the gif from cache and doesn't start again. So when I close the modal and open again or I go back to the first step again, it's like I've a image and not a gif.

Restrictions: I can't download the gif more than one time, so I can't put ?a=${Math.random() to force the gif to loop again.

What I tried:

1) I tried to put src empty in the img tag when I'm not in the first step and when the modal is not opened. And when I'm in the first step and the modal is opened I put the gif in the src of the img tag

2) I tried to do the same thing as the 1 attempt but with another gif

3) I tried to do the same as attempt 1 and 2 in the modal component and pass the src to the step children component

4) I tried to remove the img tag out of the DOM when I'm not in the first step and the modal is not opened

My simplified components:

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

Thanks in advance

Upvotes: 5

Views: 9506

Answers (4)

DevB2F
DevB2F

Reputation: 5075

Here is my implementation for a gif shown inside a div. If the div is hidden, then the gif is set to an empty string. This makes sure the gif is animated each time the div is shown.

import path1 from '../myGif.gif'
renderGif(show) {
    //set myGif and styleToDisplay for the case where
    //the div will be shown
    let myGif = path1
    var styleToDisplay = {
        position:"absolute",
    }

    //if div will not be shown, set div to hidden and 
    //myGif=""
    if (!show) {
        myGif = ""
        styleToDisplay = {display: "none"}
    }

    //instead of just returning null here when div 
    //is not shown, return a hidden div where myGif = ""
    return(
        <div
            onClick={this.toggleShow}
            style={styleToDisplay}>

            <img src={myGif} width="250px" height="250px"/>
        </div>
    );
}


toggleShow = () => {
    let t = this.state.show
    this.setState({
        show: !t,
    })
}

//call this function from another component 
//or wherever you want to show the gif
showGif () => {
    this.setState({
        show: true,
    })
}

//main render function
render() {
    return (
        {this.renderGif(this.state.show}
    )
}

Upvotes: 0

Marina
Marina

Reputation: 1780

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

Upvotes: 0

Josiane Reis
Josiane Reis

Reputation: 19

I'm not sure this will help, but you can use this package to add loopback https://www.npmjs.com/package/react-typing-animation

Upvotes: -1

Sampson Crowley
Sampson Crowley

Reputation: 1253

You can restart a non-infinite gif by clearing the image src and then re-setting it.

the way to do this in reactJS is by using component state and a zero length timeout to push to next 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>

Upvotes: 7

Related Questions