Question

有没有办法检查内联svg中的<image>是否已加载？常规imgs有一个完整的属性来检查<img>是否已加载，而不是<image>。我只想在尚未加载图像的情况下添加加载事件监听器。

<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

您仍然可以添加加载事件。没有财产可以判断它是否已被加载。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

2 个答案: