检查是否加载了内联SVG图像
问题描述:
有没有方法检查内联svg中的<image>
是否已加载?普通imgs有一个完整的属性来检查<img>
是否已被加载,但不是<image>
。我只想在图像尚未加载的情况下添加加载事件侦听器。检查是否加载了内联SVG图像
以下的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>
答
您仍然可以添加加载事件。没有属性可以判断它是否已经加载。
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>
+0
当然,但如果图像在加载事件侦听器添加之前已经加载,它永远不会触发。 – Dan0
答
我的解决办法是把图象源中的数据属性,添加的负载事件侦听器然后交换在xlink:HREF。适用于Chrome和Firefox。
<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>
这应该是 “如果(!image.complete)” 不应该吗? –
修好了,谢谢。 – Dan0
我已将您的代码示例恢复为已损坏的状态,以避免将来对此问题的读者感到困惑。 –