使用RaphaelJS确定图像何时加载到svg中 [英] Determine when an image has loaded in svg with RaphaelJS

问题描述

我正在尝试确定如何确定svg图像何时加载到浏览器中。我正在使用Raphael JS而且我已经尝试过：

I'm trying to work out how to determine when an svg image has loaded in the browser. I'm using Raphael JS and I've tried:

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

和：

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

all to no无济于事。我还使用了onload和onsvgload，但没有一个工作。

all to no avail. I've also used "onload" and "onsvgload" none of which work.

有没有确定svg图像是否实际加载？

Is there away to determine if an svg image has actually loaded?

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

I even tried loading the image using an Image() object and then calling paper.image() - but I get two calls to the image (instead of using the preloaded image); ie:

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
});

任何想法？

推荐答案

使用 onLoad 事件处理程序可以使用另外一行代码：

Using the onLoad event handler works, with one additional line of code:

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

You need to set the externalResourcesRequired attribute to true. You may read more about it here: http://www.w3.org/TR/SVG/struct.html#ExternalResourcesRequired

这篇关于使用RaphaelJS确定图像何时加载到svg中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！