检查 svg 中像素图像的成功加载

Question

使用 javascript，我通过在循环中将 <image id="myimage" xlink:href="mysource.png" ... /> 元素从 XMLdoc 移动到 SVG 图像的 DOM 来添加许多像素图像，就像这样

var elems = this.XMLdoc.getElementsByTagName('image');
var elem = elems.item(0);
svg.appendChild(elem);

由于网络问题或服务器限制，有时并非所有图像都已完全加载。 加载完所有图片后，我想检查一下是否成功，如果没有，重新加载像素图mysource.png。

我可以删除并重新添加所有<image> 标签并依赖缓存的图像已成功加载，但我仍然不知道是否所有图像都在第二轮中加载。

如果它包含在 html 中的 <img> 中，我会通过检查 image.complete 来做到这一点，但这似乎不适用于 SVG 图像。

我还使用 Snap.svg 来操作 SVG。如果有帮助的话，基于这个库的解决方案会很方便。

Answer 1

在 SVG 中你通过load 事件监听加载事件，你可以这样做：

var elems = this.XMLdoc.getElementsByTagName('image');
var elem = elems.item(0);
elem.addEventListener("error", replaceImage);
svg.appendChild(elem);

function replaceImage(e){
   var parent = this.parentNode;
   var newImage = this.cloneNode();
   newImage.addEventListener("error", replaceImage);
   parent.removeChild(this);
   parent.appendChild(newImage);
}