javascript - 检查是否加载了内联 SVG 图像

Question

有没有办法检查 <image>在一个内联 svg 中已经加载？常规 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>