我正在尝试找出如何确定 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
});
有什么想法吗?
最佳答案
使用 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
关于javascript - 使用 RaphaelJS 确定图像何时加载到 svg 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14875675/