scroll to each unloaded image until all images are “complete”, trigger a print

loadAllAndPrint.js

console.log("v11 starting..")
var incomplete = [...document.querySelectorAll('img')].filter((img) => !img.complete);
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}
const statusId = "df4bc682879a9ba2a29f";
var div = document.createElement("div");
div.id = statusId;
div.style = "position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px;";
var h = document.createElement("H1");
h.innerText = "Still loading";
var p = document.createElement("p");
p.id = "P" + statusId;
div.appendChild(h);
div.appendChild(p);
document.body.appendChild(div);
   console.log(`initial incomplete is: ${incomplete}`)
   console.log(`initial incomplete.length ${incomplete.length}`)

function processAllIncomplete() {
   var incomplete = [...document.querySelectorAll('img')].filter((img) => !img.complete);
   while (incomplete.length !== 0) {
	  const sym = String.fromCharCode(0x2460 + Math.min(20, incomplete.length));
	   console.log(`Sym: ${sym}`)
	  p.innerText = sym;
	  const ys = incomplete.map((img) => img.getBoundingClientRect().y + window.scrollY);
      var i = 0;
	  for (i = 0; i < ys.length; i++) {
         function process(i) {
            const y = ys[i]
            window.scrollTo({
              top: y,
              left: 0,
              behavior: "instant"
            });
            window.scrollBy({
              top: 200,
              left: 0,
              behavior: "smooth"
            });
         }
	     sleep(1000 * i).then(() => process(i));
	  }
    }
    if (incomplete.length !== 0) {
	    sleep(1000 * (incomplete.length + 1)).then(() => processAllIncomplete());
    } else {
        console.log("ready to print...")
        window.print()
    }
}