Изображения отображаются только с задержкой 1 секунда и затем setState - PullRequest
Новая
       8

Изображения отображаются только с задержкой 1 секунда и затем setState

0 голосов
/ 18 января 2019

У меня возникла проблема при попытке загрузить и асинхронизировать изображение, и мне нужно установить задержку в 100 мс, чтобы установить что-либо для создания изображения, но оно работает только с небольшим количеством изображения, но с гораздо большим количеством изображений ему нужно гораздо больше чем 100 мс. У любого есть решение для этого. Большое спасибо 

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

                })

1 Ответ

0 голосов
/ 18 января 2019

Используйте тег onLoad для тега image для обработки загруженного состояния: 

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

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

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