Image flashes after component mounts

NeXTs commented 7 years ago

What are you doing to avoid image flashes after element mounts? That's how I using it. After image loads, I change state to mount child component which contains same image. But image doesn't appears instantly, it looks like it's loading again, it renders progressively. (tested in chome and ff) Do you have any ideas why it may happens?

this.state = {
  imagesLoaded: false
}

...

_handleImageLoadSuccess = () => {
  this.setState({
    imagesLoaded: true
  })
}

...

<Preload
  loadingIndicator={<div/>}
  images={[imageUrl]}
  onSuccess={this._handleImageLoadSuccess}
  mountChildren={imagesLoaded} >
    <div className='my-image' style={{backgroundImage: `url(${imageUrl})`}}></div>
</Preload>

NeXTs commented 7 years ago

May be it's problem on my server side..

Could you please publish working examples? I saw examples folder but it seems to be not ready yet

NeXTs commented 7 years ago

my bad. this behavior was due to my server config

sambernard / react-preload

Image flashes after component mounts #15