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

obscure On

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

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

function started() {
var img = new Image();
img.onload = ready;
img.onloadstart = started;
img.src = "";