Images only render when delay 1 second then setState

user_7746897 0
Viewed 170

I got a problem when trying to load image async and render it and I need to set a delay for 100ms to setState anything to make image rendered but it only work with small amount of image but with much more images it needs much more than 100ms. Anyone have a solution for it. Thanks so much 

this.props.callApi('GET', '/api/folders/' + child.id + '/files', null, this.props.token, (data) => {
                    console.log(data)
                    data.data.content.forEach(ele => {
                        fetch("/api/files/" + ele.id + "/blob")
                            .then((res) => res.blob())
                            .then((res) => {
                                childFolder.uploadFile.push(URL.createObjectURL(res));
                            });
                    })
                    arr.push(childFolder);
                    this.setState({uploadedLink: arr}, () => {
                        // this.setState(this.state)
                        // this.render();
                        // NEED TO SET DELAY TO IMAGE RENDERED
                        _.delay(() => this.setState({loading: false}), 100);
                    });

                })
react-redux redux reactjs
1 Answers

Use the onLoad prop of image tag to handle the loaded state:

...
handleImgLoaded = () => {
   this.setState({ loading: false })
}

render(){
  const { uploadedLink } = this.state;

  return (
    <img src={uploadedLink} onLoad={this.handleImgLoaded} />
  )
)
user_55067300
Related