Javascript 通过加载.svg文件来消除加载延迟，或者，如何在内存中存储svg而不显示？

我一直在尝试在我的网站上运行一个圆圈的动画，当你点击一个div时就会触发。以前，我用50%边界半径的div做了一个可怕的临时方法——它几乎不起作用

现在我已经发现了SVG，我正试图让它以这种方式工作。动画很简单；我已经在svg文件中对其进行了编码。当您单击应该启动动画的div时，它会向div追加一个

，然后将svg文件（带有动画）加载到其中

它运行正常，但问题是，在单击和动画开始之间有一点延迟，当然这是在加载svg时。我以前使用圆形div完成动画的方法没有这种延迟

是否有一种方法可以在加载svg文件时将其存储在页面中，但在将其分配给单击div时创建的

之前，不会实际显示或触发它？这样它就已经被加载了，并且没有延迟

目前，我已经做了一个小工作，将整个svg代码内联到作为后备选项附加的

即

$（selProject）.append（“”）

但出于显而易见的原因，这是一个糟糕的解决办法。我还应该添加：

$（selProject）

在单击div之前不会创建。有许多可单击的div，一旦单击其中任何一个，就会变成

selProject

。因此，将

附加到每个可单击的div，然后在其变为

selProject

时在div中激活它并不是一个可行的解决方案，因为在每个可单击的div中都有一个

实例会对性能造成巨大影响

最佳解决方案是将

存储在某个地方，隐藏起来，然后在创建

$（selProject）

时将其移动到

$

有没有更好的方法来处理我的问题？
尝试在
中添加
style=display:none
，包括
html
，或者在页面加载时添加
$（selProject）
，调用
$（“object”）。在
单击
div
的
时显示（0）
？@guest271314您的解决方案绝对可行。问题是，
$（selProject）
只有在单击div时才会建立，此时该div变为
$（selProject）
。有许多可能被单击的div可能会变成
$（selProject）
，因此在单击之前，让svg对象在每个div中都处于“休眠”状态将是一个巨大的性能打击。可能有多个
$（selProject）
元素同时可见？或
$（selProject）
的单个实例，单击
div
，在
document
中创建
object
？您的问题标题询问如何在内存中存储SVG@guest271314告诉您如何显示：无，您回答说，由于性能原因，这是站不住脚的。如果存储在内存中不好，你真的应该编辑标题和正文来阐明你的要求。@RobertLongson你是对的，我解释得不够透彻。我添加了一段解释，虽然我仍在寻找存储在内存中，但它不能在
$（selProject）
中。
$(selProject).append('<object type="image/svg+xml"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 360 360" enable-background="new 0 0 360 360" xml:space="preserve"><circle cx="180" cy="180" r="0.01" stroke="#FFFFFF" stroke-width="0.5" fill="none"><animate attributeName="r" from="0.01" to="270" dur="0.3" begin="0s" fill="freeze"/><animate attributeName="stroke-width" from="0.5" to="100" dur="0.3" begin="0s" fill="freeze"/></circle></svg></object>')