检查是否加载了内联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>