fnes_5_load_image.html

<div id="el1"></div>
<div id="el2"></div>

<script>
function loadImage(src) {
  return new Promise(function(resolve) {
    var image = new Image();
    image.onload = function() { resolve(image); };
    image.src = src;
  });
}

// 이미지 주소 출처 - http://www.http2demo.io
const urls = [
  "https://1906714720.rsc.cdn77.org/http2/tiles_final/tile_0.png",
  "https://1906714720.rsc.cdn77.org/http2/tiles_final/tile_1.png",
  "https://1906714720.rsc.cdn77.org/http2/tiles_final/tile_2.png"
];

const el1 = document.querySelector('#el1');
const el2 = document.querySelector('#el2');

// Vanilla
Promise.all(
  urls.map(loadImage)
).then(imgs =>
  imgs.forEach(img => el1.appendChild(img))
);

// Functional
go(urls,
  mapC(loadImage),
  each(img => el2.appendChild(img)));
</script>