Delay GIF before onclick (CSS / Javascript)
I have a gif that loads once (for example gif doesn't work) when a button is clicked. This is used to indicate that the user has successfully copied their serial number as shown in this screenshot:
I installed this using the following CSS :
.greentickactive {
visibility: hidden;
}
Js
<script>
document.getElementById("copyButton2").onclick = function() {
document.getElementById("greentickactive").style.visibility = "visible";
}
</script>
With "greentickactive" as the gif CSS class and "copyButton2" representing the trigger to change the state. This all works, but the gif should load when the page loads (I assume I can't see it on load) and I only need it to load when the (copyButton2) button is pressed. I tried to replace;
document.getElementById("greentickactive").style.visibility = "visible";
from
document.getElementById("greentickactive").style.display = "block";
and changing the CSS to;
.greentickactive {
display: none;
}
but this is causing page spacing issues and still prevents the gif animation from playing at the right time. Does anyone know of a different method to achieve this, or maybe something is wrong with this setup?
You can defer loading the image until the copy is clicked, and to handle spacing issues, just set the element's height and width.
Assuming you have the following css for .greentickactive
:
.greentickactive {
width: 64px;
height: 64px;
display: inline-block;
background-color: transparent;
background-repeat: no-repeat;
}
you can change your javascript to:
document.getElementById("copyButton2").onclick = function() {
document.getElementById("greentickactive").style.backgroundImage = 'url("/path/to/image/greentick.gif")';
}
Let me know how it works for you.
source to share