嵌入的 svg 何时实际加载，我如何检查它是不是已加载

Posted 2023-02-22

【中文标题】嵌入的 svg 何时实际加载，我如何检查它是不是已加载

【英文标题】：when is the embedded svg actually loaded, and how can i check if its loaded嵌入的 svg 何时实际加载，我如何检查它是否已加载

【发布时间】：2018-06-27 15:04:06

【问题描述】：

我已经在 html 对象标签中嵌入了 svg。我遇到了需要检查对象元素中的 svg 是否实际加载的情况。

<object id="object_id" data='some_svg.svg'></object>

我尝试使用以下代码进行检查。

document.getElementById('object_id').contentDocument.getElementsByTagName('svg')[0]

在各种情况下：

案例 1：

<object id="object_id" data="some_svg.svg">
    #document
</object

案例2：

<object id="object_id" data="some_svg.svg">
    #document
        <svg>
            // content of the svg path etc.
        </svg>
</object

如何确认嵌入的 svg 已正确加载。

注意：addEventListener 不能解决问题。图像可能在事件侦听器实际注册之前已经加载

【参考方案1】：

尝试使用window.load() 方法等待DOM，以及所有HTML content 加载（所有图像、CSS 等）然后执行，如下所示：

window.addEventListener('load', function()

    document.getElementById('object_id').contentDocument.getElementsByTagName('svg')[0]
);

【讨论】：

我也没有这个选项。我需要检查它是否加载了多次。因此我会执行一些操作

您是否正在动态加载 svg（例如通过单击按钮）？您是在交换多个 svg 还是只是一个？

是的，我正在动态加载 svg。我有多个 svg。当我单击时，其中一些会发生变化。我正在将所有 svg 绘制到画布上。所以我需要检查 svg 是否已预加载或尚未加载