Прикрепите элементы DOM к другим элементам DOM только после их загрузки

Question

Я пытаюсь написать код для следующего:

1. Когда пользователь загружает изображения, возвращает предварительный просмотр этих изображений в качестве элементов холста. (Об этом позаботится API loadImage)
2. Прикрепите элементы div рядом с каждым из этих полотен.

Чтобы выполнить вышеизложенное по порядку, мне потребуется вызвать document.querySelectorAll Метод только после того, как элементы холста полностью прорисованы.

Вот код, который я написал. Я попытался использовать обещание здесь, но, видимо, обещание разрешается после вызова функций loadImage, а не после того, как элементы canvas полностью прорисовываются. Когда я запускаю функцию, предварительный просмотр заполняется как элементы canvas, но элементы div 'photo_order' не присоединяются.

function rpu() {
  let promise = new Promise(async function(resolve, reject) {
    let filez = e.target.files;
    let files = Array.from(filez);
    files.forEach(function(file) {
      loadImage(
        file,
        function(img) {
          document.querySelector('#r_im_preview').appendChild(img);
          document.querySelector('#r_im_preview').classList.remove('hide');
        }, {
          maxWidth: 150,
          orientation: true,
          contain: true
        }
      )
    });
    resolve();
  });
  promise.then(function() {
    let k1 = document.querySelectorAll('canvas');
    let k2 = Array.from(k1);
    let k3 = '<div class="photo_order" style="cursor: pointer;"></div>'
    k2.forEach(k => {
      k.insertAdjacentHTML('afterEnd', k3);
    })
  });
}

Как исправить код, чтобы добиться того, что я пытаюсь сделать? Любой совет будет очень кстати.

Answer 1

Я думаю, что вам нужно реорганизовать свой код, чтобы правильно использовать обещания. Как то так:

const appendPreview = (img) => {
    document.querySelector('#r_im_preview').appendChild(img)
    document.querySelector('#r_im_preview').classList.remove('hide');
}

const loadImageP = (file, cb, settings) => new Promise((resolve, reject) => {
    try {
        const cbP = (...args) => (cb(...args), resolve)
        loadImage(file, cbP, settings)
    } catch {
        reject()
    }
})

const settings = {
    maxWidth: 150
    orientation: true,
    contain: true
}

async function rpu() {
    const promises = [...e.target.files].reduce((acc, file) => 
        [...acc, loadImageP(file, appendPreview, settings))], [])

    await Promise.all(promises)

    let canvasNodes = document.querySelectorAll('canvas');
    let orderNode = '<div class="photo_order" style="cursor: pointer;"></div>'
    [...canvasNodes].forEach((n) => { n.insertAdjacentHTML('afterEnd', orderNode);
}