使用RaphaelJS确定SVG图像何时已加载

Question

我正在尝试确定在浏览器中何时加载了一个svg图像。我正在使用Raphael JS，并已尝试：

var image = paper.image(path, 0,0,10,10);
image.node.addEventListener('load', function(){alert("test");});

并且：

$('image').on('load')  

所有的努力都白费了。我还尝试使用"onload"和"onsvgload"，但都不起作用。

有没有办法确定svg图像是否真正加载了？

我甚至尝试使用Image()对象加载图像，然后调用paper.image() - 但是我会得到两个对图像的调用（而不是使用预加载的图像）;

var preload = new Image();
preload.src = imgPath;
preload.addEventListener('load', function () {
    image.path = preload.src;
    //Now load image in raphael - except this still forces the browser to make another call for the image
});

您有什么想法？

- Lee

Answer 1

使用onLoad事件处理程序可以工作，只需要添加一行额外的代码：

var image = paper.image(path, 0,0,10,10);
var image_node = image.node;
image_node.setAttribute('externalResourcesRequired','true');
image_node.addEventListener("load", function() {
    console.log("image is loaded!");
})

你需要将externalResourcesRequired属性设置为true。你可以在这里阅读更多相关内容：http://www.w3.org/TR/SVG/struct.html#ExternalResourcesRequired。

- weiy

---

这在所有浏览器上都有效，但是IE不行。有什么办法可以让它在IE上运行吗？ - Lee