d3.queue image loader by fil

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
  d3.imageload = function(src, cb) {
    image = new Image();
    image.src = src;
    image.onload = function() { cb(null, image); };
    image.onerror = cb;
  }

  d3.queue()
    .defer(d3.text, 'hola.txt')
    .defer(d3.imageload, 'thumbnail.png')
    .await(function(err, text, image) {
    
    let msg = (err) ? "Error: " + err : `Image and text loaded (${text})`;

    d3.select('body').append('p')
      .html(msg)
      .style("font-size", 14)
      .style("font-family", "monospace");
    
    if(err) return;

    var canvas = d3.select('body').append('canvas')
    .attr('width', image.width)
    .attr('height', image.height),
        context = canvas.node().getContext('2d');
    context.drawImage(image,0,0);
  });
  </script>
</body>

hola.txt

Text contents