Начать загрузку следующего изображения, как только предыдущая полностью закончила загрузку

Question

ОБНОВЛЕННЫЙ КОД И ВОПРОС

this.state.imageUrls.map((ImageUrl, index)=> {
return (<div>
    <img onLoad={this.imageLoaded} src={ImageUrl} className= 
    {this.state.galleryContent}/>
    </div>
    )})

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

То, что я пытаюсь сделать, это отобразить массив изображений. Когда он загружен, вызывается функция, которая затемняет это изображение (обновляя className), а затем то же самое со всеми другими изображениями по одному. Таким образом, вопрос теперь в том, что когда загружено одно изображение, я изменяю данные из galleryContent, и к моменту начала следующей итерации мне нужно вернуть значение «gallery-content-loading». Каков наилучший способ сделать это?

Answer 1

Я не совсем понимаю, что именно вы имеете в виду.Я вижу, вы предоставляете imageLoaded как событие onLoad.Если вы хотите сгенерировать массив, а также выполнить функцию для его элемента, лучше использовать forEach, чтобы сделать это, объявив другую переменную и добавив к ней нужный div в каждой итерации forEach.map не предложит вам никакого обратного вызова для выполнения другой функции в элементе после того, как будет возвращен эквивалентный сопоставленный элемент.