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

#javascript #ajax #url #xmlhttprequest

Вопрос:

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

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

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

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

Ответ №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";

1. Спасибо, но это не то, что я просил (я не могу изменить библиотеку), чтобы добавить событие к созданному элементу изображения.

2. Это зависит от вашей библиотеки. Если он предоставляет эти изображения в качестве глобальных переменных, это может быть возможно, но нам нужно будет посмотреть, о какой библиотеке вы говорите.

3. Я думаю, что это невозможно, поскольку переменные изображения создаются внутри функции библиотеки, в любом случае спасибо.