Question

尝试加载图像异步并渲染时出现问题，我需要设置100ms的延迟以设置状态以使图像渲染，但它仅适用于少量图像，但对于更多图像，则需要更多比100ms任何人都有解决方案。非常感谢

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

                })

Answer 1

使用图片标签的onLoad属性处理加载状态：

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

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

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

图像仅在延迟1秒然后setState时渲染

1 个答案: