延迟 GIF 直到点击（CSS/Javascript）

Question

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

我已经使用以下代码进行了设置，CSS：

.greentickactive {
    visibility: hidden;
}

JS：

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

使用“greentickactive”作为 gif CSS 类，“copyButton2”表示状态更改的触发器。这一切正常，但是 gif 必须在页面加载时加载（我假设我在加载时看不到它），我需要它只在按钮时加载（copyButton2）被点击。我尝试替换；

document.getElementById("greentickactive").style.visibility = "visible";

与

document.getElementById("greentickactive").style.display = "block";

并将 CSS 修改为；

.greentickactive {
    display: none;
}

但这会导致页面上的间距问题，并且仍然不允许 gif 动画在正确的时间播放。有没有人知道另一种方法来实现这一点，或者这个设置可能有什么问题？

Answer 1

您可以推迟图片的加载，直到单击副本，并且要处理间距问题，只需设置元素的高度和宽度。

假设您有以下 .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")';
}

让我知道你的效果如何。