javascript - 检查 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>标签并依赖于缓存的图像加载成功，但我仍然不知道是否所有图像都在第二轮加载。

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

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

Answer 1

在SVG中你通过load事件监听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);
}