запуск события загрузки при загрузке href тега изображения

Question

У меня есть тег изображения в моем HTML коде, например:

<image
    transform="scale(1, 1)"
    id="uniqueDomId-301"
    data-original-image="01"
    x="-6"
    y="-6"
    opacity="1"
    xlink:href="https://www.armytimes.com/resizer/DSRTzWuazXDDnMGKhI_WjpsejqE=/1200x0/filters:quality(100)/arc-anglerfish-arc2-prod-mco.s3.amazonaws.com/public/I7BT6CWECJDIVDKFA25OQBFQ7M.jpg"
    height="756"
    width="1445"
    data-accepts="events"
    data-reactid=".0.0.3.2.0.1.0:$_player=15g5VJPvQEXE=16hc3eOukv2x.0.3:$c249.1:$c256.$slideobject299.$0.$0.$0"
></image>

Что, если мы хотим проверить, что изображение полностью загружено с помощью его атрибута xlink:href?

Я безуспешно использовал что-то вроде этого:

coverLoaded(); 
function coverLoaded(){

    const coverSelector = $('#uniqueDomId-301')[0].getAttribute("xlink:href");

    console.log(coverSelector); // I can select the href this way

    coverSelector.on("load", function() {
       console.log('image is fully loaded!');
    }); 

}

<image
    transform="scale(1, 1)"
    id="uniqueDomId-301"
    data-original-image="01"
    x="-6"
    y="-6"
    opacity="1"
    xlink:href="https://www.armytimes.com/resizer/DSRTzWuazXDDnMGKhI_WjpsejqE=/1200x0/filters:quality(100)/arc-anglerfish-arc2-prod-mco.s3.amazonaws.com/public/I7BT6CWECJDIVDKFA25OQBFQ7M.jpg"
    height="756"
    width="1445"
    data-accepts="events"
    data-reactid=".0.0.3.2.0.1.0:$_player=15g5VJPvQEXE=16hc3eOukv2x.0.3:$c249.1:$c256.$slideobject299.$0.$0.$0"
></image>

Каким-то образом мы хотим запустить событие, если это изображение загружено:

xlink:href="https://www.armytimes.com/resizer/DSRTzWuazXDDnMGKhI_WjpsejqE=/1200x0/filters:quality(100)/arc-anglerfish-arc2-prod-mco.s3.amazonaws.com/public/I7BT6CWECJDIVDKFA25OQBFQ7M.jpg"

Answer 1

Во-первых, некорректный образ html. Так что вам, вероятно, потребуется использовать «img».

Вы можете использовать eventListener для любого элемента. Есть событие под названием «загрузка». Вы также должны убедиться, что javascript, который добавляет прослушиватель событий, загружен до загрузки изображения. Вы можете сделать это, поместив сценарий в заголовок.

Как использовать событие загрузки:

element.addEventListener("load", () => {
    //will be executed after element is loaded.
});

Вы также можете использовать это событие, выполняемое после загрузки всей страницы, например :

window.addEventListener("load", () => {
    //will be executed after page is loaded.
});