How to detect if all contents of a web page are loaded

Question

Is there a way to detect if all resource on a web page is loaded? Even if I can detect just all the images are completely loaded, that will help a lot. My situation is like this:

I have an iframe in a page and inside the iframe, there is a function the calls window.print(), which will print the contents of the iframe. The content of the iframe is generated upon clicking a button in the parent of the iframe. This button is also responsible for calling the print function inside the iframe, immediately after generating the contents.

The problem is once the button is clicked, the html is generated and then the window.print() is called displaying the Print Preview window. But this happens too fast and the images aren't loaded yet so the Print Preview window shows empty images.

I'm trying to be able to check if all images are loaded before I call window.print() but I'm not sure what to do. I tried a while loop, checking the complete property, something like:

var img = document.getElementById("myImg");
while (!img.complete) {
}

window.print();

but it ends up in an infinite loop.

Any ideas what options I have?

Real Quick · Accepted Answer

I happen to have a script for a gif loader that might help you out:

var gif = new Image();
gif.src = 'https://media.giphy.com/media/HoaHfvovCLSvu/giphy.gif';
gif.onload = function() {
  console.log("Image 1 ready to append");
  document.querySelector('.bg-image').src = gif.src;
};

In your case you could do a foreach and to check if all images are loaded:

var images = document.querySelectorAll('.bg-image');
var counter = 0;

images.forEach(function(image) {
  var gif = new Image();
  gif.src = 'https://placekitten.com/200/300';
  gif.onload = function() {
    console.log("Image ready to append");
    image.src = gif.src;
    counter++;
    if (counter === images.length) {
      doPrint();
    }
  }
});

function doPrint() {
  console.log("Image ready to print");
}

Or ES6 Promise:

var images = document.querySelectorAll('.bg-image');

function appendImages(image, cb) {
  setTimeout(() => {
    var gif = new Image();
    gif.src = 'https://placekitten.com/200/300';
    gif.onload = function() {
      console.log("Image ready to append");
      image.src = gif.src;
      cb();
    }
    //delay
  }, 100);
}

var requests = [...images].map((image) => {
  return new Promise((resolve) => {
    appendImages(image, resolve);
  });
})

function doPrint() {
  console.log("Image ready to print");
}
Promise.all(requests).then(() => doPrint());

How to detect if all contents of a web page are loaded

Answers (2)

Related Questions