Question

我正在React中制作一个图片库。在加载图像时，我想显示一个加载微调器，我想我应该在ComponentDidMount中设置IsLoading状态，但这不是一个好主意，因为我想等待图像完全加载，而不是页面呈现，那样之后发生的。因此，我决定使用img onLoad。我什至决定以0不透明度“覆盖”图像，直到它们被加载。加上下面的代码，我得到的是显示正在加载的“旋转器”而不是所有图像，直到最后一张图像被加载，然后同时将它们全部淡入。我想要达到的是在每张图像上分别显示加载程序，并在加载一张图像后立即将其淡入。

class Photography extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            galleryContent: 'gallery-content-loading'
        }
        this.imageLoaded = this.imageLoaded.bind(this);
        this.renderSpinner = this.renderSpinner.bind(this);
        this.renderImage = this.renderImage.bind(this);
    }

    renderImage(imageUrl) {
    return( 
                <div>
                <img className={this.state.galleryContent} src={imageUrl}
                onLoad={(event) => this.imageLoaded(event)} />
                </div>
                )
    }

    imageLoaded = (event) => {
        this.setState({isLoading: false, galleryContent: 'gallery-content-loaded'});

    }

    renderSpinner() {
      if ((this.state.isLoading) === true) {
      return (
        <ReactLoading type={bars}/>
      );
    }
    }

    render () {
        const imageUrls = [
        Image1,Image2,Image3,Image4,Image5,Image6,Image7,Image8,Image9
        ];


        return (
            <div>
            <div className="gallery-container">
            {
            imageUrls.map(imageUrl => {
            return (
                    <div>
                    {this.renderSpinner()}
                    <div className="gallery-content">
                    {this.renderImage(imageUrl)}
                    </div>
                    </div>
                    )
            })}
            </div>
            </div>
            );
        }
}

在React中修改图库加载

0 个答案: