SVG onload 事件调用太早？

Posted 2023-03-06

【中文标题】SVG onload 事件调用太早？

【英文标题】：SVG onload event called too early?

【发布时间】：2012-06-12 18:15:27

【问题描述】：

我有这样的代码，使用 jQuery-svg

function replaceRaster()
    $('#png').remove()
    a = $('#graphic')
    b = a.svg(a)
    a.load('IDC_Energy.svg',
         onLoad:bind )
   svg = document.getElementById("graphic").children[0]
   console.log(svg)
   svg.addEventListener('load', bind)

事件处理程序bind 在 jQuery-svg-dom 能够选择 SVG 数据中的元素之前被触发。我的代码应该查看 SVG 并分配各种类并将侦听器附加到各种元素，但它无法找到任何元素。如果我在加载完所有内容后在控制台中调用 bind，它可以找到所有 SVG 元素。

我做错了吗？是否有另一种方法可以检测 SVG DOM 何时可用？我曾想过使用计时器，但这真的很麻烦，尤其是考虑到我的 SVG 文件可能有几 MB 大。

【参考方案1】：

您是否尝试过使用计时器延迟为“0”或可能只是“10”的计时器？我经常使用这种技术将工作推出当前运行循环，因为在重绘 ghas 完成后会触发计时器。幸运的是，只有在重绘完成后才会触发绑定。我不确定这是否会对您的特定情况有所帮助，因为我不知道您在页面中还做了什么 - 例如，如果您正在进行一些异步数据处理，它将无济于事。

【讨论】：

页面正在异步加载 SVG 数据，是的。我最终使用一个循环来检查内容是否每 50 毫秒或其他时间准备好（现在忘记了）。