Изменить загрузку галереи изображений в React - PullRequest
Новая
       6

Изменить загрузку галереи изображений в React

0 голосов
/ 10 ноября 2018

Я создаю галерею изображений в React. Пока изображения загружаются, я хочу показать загрузочный счетчик. Я подумал, что должен установить состояние IsLoading в ComponentDidMount, но это не очень хорошая идея, потому что я хочу дождаться полной загрузки изображений, а не отображения страницы, и это происходит после этого. Поэтому я решил пойти с 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>
            );
        }
}
...