インラインSVGイメージがロードされているかどうかをチェック

Question

インラインSVGの<image>がロードされているかどうかを確認する方法はありますか？通常のimgは、<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

あなたはまだ、ロードイベントを追加することができます。すでに読み込まれているかどうかを知るためのプロパティはありません。 HREFを：

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に入れ替えるloadイベントリスナーを追加することです。 ChromeとFirefoxで動作します。それはいけない "（​​！image.complete）場合は、" あるべき

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>