如何用SVG图像监听对象的加载事件？ [英] How to listen to a load event of an object with a SVG image?

问题描述

我希望在加载 snap.svg 后加载SVG图像。不幸的是，从不调用load事件的回调。如何将加载事件注册到svg对象？

I want to manipulate a SVG image after it's loaded with snap.svg. Unfortunately the callback of the load event is never called. How can I register a load event to the svg object?

我创建了这个我的问题的最小例子。

I have created this minimal example of my problem.

HTML：

<object data="http://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" type="image/svg+xml" id="animation" />

Javascript：

Javascript:

alert('loading');
$('#animation').on('load', function() {
  alert('loaded');
});

推荐答案

从这篇文章jQuery SVG-object标记加载事件

似乎jQuery只是阻止将load事件绑定到
非图像或文档元素，所以我只使用官方
addEventListener（）函数。 ..

It seems like jQuery simply prevents to bind a "load" event to a non-image-or-document element, so I just use the "official" addEventListener() function...

还不确定是否仍然如此，但你的问题主要是在jsfiddle，你正在执行文件加载的代码而不是文件准备好。加载文档意味着在执行代码之前加载了所有资源，因此svg图像已经加载。

Also unsure if that's still the case but your issue was mostly that in jsfiddle you were executing the code on document "loaded" instead of document "ready". Document loaded means all the resources are loaded prior executing the code so the svg image would already be loaded.

使用此更新的jsfiddle http://jsfiddle.net/47jSh/2/

Works fine with this updated jsfiddle http://jsfiddle.net/47jSh/2/

alert('loading');
$('#animation')[0].addEventListener('load', function() {
    alert("loaded");    
}, true);

这篇关于如何用SVG图像监听对象的加载事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！