How to track the loading of an image on a page?

Question

JavaScript

There is a page with three canvas. By event, the script draws three images on them with the given src. Images should not be drawn at the moment the page is loaded, and in general they can change while working with the page. The page does not reload.

Problem. The script that loads pictures and draws them on the canvas "works out" before the pictures are actually loaded, respectively, emptiness is "drawn" on the canvas. When re-executing, i.e. with cached images, everything is fine.

Question. How to track that the picture is really fully loaded? Tracking the image object in the DOM does not help, the object is there, but it is underloaded.

Answer 1

Hold