延迟GIF直到onclick（CSS/Javascript）

我有一个gif，点击按钮时加载一次（即gif不会循环）。这表示用户已成功复制其序列号，如本屏幕截图所示：

我已经使用下面的代码设置了它，CSS：

.greentickactive {
    visibility: hidden;
}

    <script>
document.getElementById("copyButton2").onclick = function() {
    document.getElementById("greentickactive").style.visibility = "visible";
}
</script>

JS：

.greentickactive {
    visibility: hidden;
}

    <script>
document.getElementById("copyButton2").onclick = function() {
    document.getElementById("greentickactive").style.visibility = "visible";
}
</script>

与

以及修订CSS至,

.greentickactive {
    display: none;
}

---

但这会导致页面上的间距问题，并且仍然不允许在正确的时间播放gif动画。是否有人知道实现此目的的其他方法，或者此设置可能有问题？

您可以推迟加载图像，直到单击“复制”按钮，若要处理间距问题，只需设置元素的高度和宽度即可

假设您的

.greentickactive

具有以下css：

.greentickactive {
    width: 64px;
    height: 64px;
    display: inline-block;
    background-color: transparent;
    background-repeat: no-repeat;
 }

然后，您可以将javascript更改为：

document.getElementById("copyButton2").onclick = function() {
    document.getElementById("greentickactive").style.backgroundImage = 'url("/path/to/image/greentick.gif")';
}

---

让我知道你是怎么做的。

为什么不在点击触发时附加图像？@madalinivascu我有点像JS noob如果我诚实的话，这是一件容易做到的事情吗？这里有很好的例子：很遗憾，这会在页面加载时加载勾号，然后在点击按钮时整个父容器，请参阅：添加一个

背景重复：无重复

以便您的背景不重复如果页面加载时图像已经显示，则表示您之前已经在某处加载了它。因为你没有发布你的全部代码，我不知道去哪里找。我添加了@madalinivascu建议的禁止重复