Как дождаться выполнения append?

Question

[Barring]

Есть следующая задача.
Имеется массив картинок, 3 вертикальных блока и необходимо осуществить равномерное присоединение этих картинок к блоку дабы соблюдалась ~ одинаковая высота.
Я прохожусь foreach по массиву, при каждой итерации сравниваю высоты 3х блоков и выбираю наименьшую, туда и присоединяю картинку.
Проблема возникает в следующем. Иногда append не успевает присоединить (как мне кажется) картинку в DOM и до завершения "аппенда" уже идёт следующая итерация foreach и соответственно блок с минимальной высотой высчитывается некорректно.

Примеры работы :

При маленьком кол-ве загружаемых картинок

При больше нагрузке

Есть какие-то варианты реализации по типу append.onload или что-то в таком духе?

Answer 1

[Ihor Bratukh]

append синхронный, а вот загрузка картинки нет, к счястью у node элемента img есть события load/error

Пример es5 jquery, если пишите на es6+, то логика та же но вместо $.Deferred -> Promise

var urls = [
    'https://picsum.photos/id/345/2000/2000',
    'https://picsum.photos/id/347/2000/2000',
    'https://picsum.photos/id/349/2000/2000',
    'https://picsum.photos/id/320/2000/2000',
    'https://picsum.photos/id/351/2000/2000',
    'https://picsum.photos/id/372/2000/2000'
];

var $wrapper = $('.wrapper');

urls.forEach(function (url) {
    createImage(url).then(function (image) {
        var $image = $(image);
        $wrapper.append($image);
        console.log({
            width: $image.width(),
            height: $image.height()
        });
    }).fail(function (image) {
        console.error('Ошибка загрузки картинки');
    });
});

function createImage(url) {
    var $deferred = $.Deferred();
    $('<img/>', {
        src: url
    }).one({
        load: function () {
            $deferred.resolve(this);
        },
        error: function () {
            $deferred.reject(this);
        }
    });
    return $deferred;
}

Comments

[Barring]

С синтаксисом jquery, к сожалению, не знаком.
В моём варианте у меня изначально просто задаются необходимые свойства для img, указывается тот самый, злосчастный src и потом при img.onload уже идёт append.
img.onload = () => addGifs(img);

[Ihor Bratukh]

Barring, ES6, без jquery

const urls = [
    'https://picsum.photos/id/345/2000/2000',
    'https://picsum.photos/id/347/2000/2000',
    'https://picsum.photos/id/349/2000/2000',
    'https://picsum.photos/id/320/2000/2000',
    'https://picsum.photos/id/351/2000/2000',
    'https://picsum.photos/id/372/2000/2000'
]

urls.forEach(url => {
    createImage(url).then(image => {
        document.body.append(image)
        console.log({
            width: image.clientWidth,
            hight: image.clientHeight
        });
    }).catch(image => {
        console.error('Ошибка загрузки картинки')
    })
})

function createImage(url) {
    return new Promise((resolve, reject) => {
        const image = document.createElement('img')
        image.src = url
        image.addEventListener('load', () => resolve(image), { once: true })
        image.addEventListener('error', () => reject(image), { once: true })
    });
}

[Ihor Bratukh]

Barring, покажите тогда код для лучшего понимания

[Barring]

Ihor Bratukh, без jquery вариант более понятен.
Мой отрывок кода выглядит следующим образом и как я понимаю то дабы обойтись без использования промисов (что явно не есть хорошо), то можно просто добавить какой-то обработчик на событие onerror дабы отлавливать ошибки при загрузке в случае чего и всё будет корректно работать:

let xhr = new XMLHttpRequest;
  xhr.open('GET', link, true);
  xhr.send();
  xhr.onload = () => {
    let response = JSON.parse(xhr.responseText);
    response['data'].forEach( elem => {
      let img = document.createElement('img');
      img.src = elem['images']['480w_still']['url'];
      img.style.width = '100%';
      img.onload = () => addGifs(img);
    })
  }

  function addGifs(img) {
    let minIndex = 0;
    let columnsHeight = options.columns.map( column => {
      return column.offsetHeight;
    });
    console.log(columnsHeight, minIndex);
    for (let i = 0; i < columnsHeight.length; i++) {
      if (columnsHeight[minIndex] > columnsHeight[i]) {
        minIndex = i;
      }
    }
    options.columns[minIndex].append(img);
    }

[Ihor Bratukh]

Barring, сделайте нормальный рабочий пример в песочнице: codepen, jsfidle ..., где есть проблема.
Что такое options.columns, где он считается. Это не битва экстрасенсов.