Javascript-如何从动态创建的图像元素中检测图像请求？

Question

基本上，我使用一个Javascript库，该库在一个函数下具有以下代码：

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

它将向服务器发送多个HTTP GET请求（在Firefox的“开发人员控制台”>“网络”中，其类型为“原因”列下的“ img” ）。

如何使用JavaScript库（我无法更改库）从index.html中上面的代码检测事件（图像开始加载并完全加载图像）？

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