加載圖像標簽的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.
});