Basically, I use a Javascript Library which has this code under a function:

var img = new Image();   // Create new img element
img.src = 'URL/myImage.png'; // Set source path

It will send multiple HTTP GET requests to server (in Firefox's Developer Console > Network, their type is 'img' under 'Cause' column).

How can I detect the event (image starts loading and image loaded completely) from the code above in my index.html using the javascript library (I cannot change the library)?

1 Answers

0
obscure On

This can be done by listening to the onloadstart and onload events respectively.

function ready() {
  console.log("picture loaded");
}

function started() {
  console.log("loading");
}
var img = new Image();
img.onload = ready;
img.onloadstart = started;
img.src = "https://picsum.photos/200/300";