檢查是否加載了內聯SVG圖像

Question

有沒有方法檢查內聯svg中的<image>是否已加載？普通imgs有一個完整的屬性來檢查<img>是否已被加載，但不是<image>。我只想在圖像尚未加載的情況下添加加載事件偵聽器。

以下的Here's a codepen：

<svg width="300" height="300"> 
    <image xlink:href="http://placebeard.it/300/300" width="300" height="300"></image> 
</svg> 


<script> 
    var image = document.querySelector('image'); 
    console.log(image.complete) // undefined 
    if (!image.complete && image.complete != null){ // does not work because there is no complete property of svg image, unlike a regular img 
    image.addEventListener('load', function(){ 
     alert('image loaded'); 
    }); 
    } 
</script> 

Answer 1

您仍然可以添加加載事件。沒有屬性可以判斷它是否已經加載。

var image = document.querySelector('image'); 
 
image.addEventListener('load', function(){ 
 
    alert('image loaded'); 
 
});

<svg width="300" height="300"> 
 
    <image xlink:href="http://placebeard.it/300/300" width="300" height="300"></image> 
 
</svg>

Answer 2

我的解決辦法是把圖象源中的數據屬性，添加的負載事件偵聽器然後交換在xlink：HREF。適用於Chrome和Firefox。

Codepen

<svg width="300" height="300"> 
    <image xlink:href="http://placebeard.it/300/300" width="300" height="300"></image> 
</svg> 

<script> 
    var image = document.querySelector('image'); 
    image.addEventListener('load', function(){ 
    alert('image loaded'); 
    }); 

    image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 
    image.dataset.src); 
</script>