JavaScript - Как обнаружить запрос изображения от элемента изображения, который создается динамически?

Question

В основном я использую библиотеку Javascript, в которой этот код находится под функцией:

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

Она будет отправлять несколько запросов HTTP GET на сервер (в консоли разработчика Firefox> Сеть, их тип 'img' в столбце 'Причина').

Как я могу обнаружить событие (изображение начинает загружаться и изображение загружается полностью) из кода выше в моем index.html, используя библиотеку javascript ( Я не могу изменить библиотеку )?

Answer 1

Это можно сделать, прослушивая события onloadstart и onload соответственно.

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";