.appendChild和window.print（）;

Question

I have the following code:

const printString = // a long string w/ several base64 encoded images;
const printContainer = document.createElement('div');
printContainer.innerHTML = printString;
document.body.appendChild(printContainer);
window.print();

printString is a long string with several largeish base64 encoded images included. The string gets set as the innerHTML of the printContainer and then the whole thing gets printed.

This works okay, but on the initial load of the page, it apparently takes the browser a moment to render the base64 encoded images and in that time, window.print() goes ahead and fires, before all the images have actually loaded into the DOM .

That is, window.print() can fire before .innerHTML has finished rendering the new element.

If I add a brief delay to the window.print() , then everything works fine. Like so:

const printString = // a long string w/ several base64 encoded images;
const printContainer = document.createElement('div');
printContainer.innerHTML = printString;
document.body.appendChild(printContainer);
setTimeout(() => {
    window.print();
}, 100);

This isn't a great solution, however, and I would really like to find a solution along the lines of "you just wait until .innerHTML() is actually finished, window.print();

All of this is tested in Chrome, so far.

Any ideas appreciated!

Edit: an answer

This is a modest reworking of @Keith's answer below.

const imgs = document.querySelectorAll('img.images-in-question');
function checkDone() {
  if (ready === imgs.length) {
    // do stuffs
  }
}
function incrementReady(){
  ready++;
  checkDone();
}
for (const img of imgs) {
  if (img.complete) ready++;
  else {
    img.addEventListener('load', incrementReady);
  }
}
checkDone();

Answer 1

Below is a simple script to wait for all images to load.

It basically does a querySelectAll to get all the images, and then attaches the onload event, when the amount of images loaded is equal to the amount of images in the list, everything is then loaded.

This then will of course work with both external URL, and data uri's..

Update, noticed a slight issue with my original image load check, in Chrome sometimes the onload is not fired, I assume it's because if it can pull the resources from cache, it might get loaded before the onload event is even attached, as such I've added a check for the complete flag first. This seems to fix the issue..

 const imgs = document.querySelectorAll("img"); let waiting = 0; let count = 0; function checkDone() { if (count === waiting) { console.log("all images loaded"); } } for (const img of imgs) { if (!img.complete) waiting ++; else img.addEventListener('load', () => { count ++; checkDone(); }); } checkDone(); 

 <img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" style="width:100px;height:100px"> <img src="https://via.placeholder.com/350x150.svg"> <img src="https://via.placeholder.com/300x100.svg"> <img src="https://via.placeholder.com/200x400.svg"> 

Answer 2

This would be a good case to use requestAnimationFrame .

const printString = // a long string w/ several base64 encoded images;
const printContainer = document.createElement('div');
printContainer.innerHTML = printString;
document.body.appendChild(printContainer);
requestAnimationFrame(function () {
    window.print();
});

requestAnimationFrame waits for the next paint and then runs the function, thus you can be sure that window.print() won't run until just after the HTML has been rendered.