Delay GIF until onclick (CSS/Javascript)

View Image

I have a gif that loads once (i.e gif doesn’t loop) when a button is clicked. This is used to signify that a user has successfully copied their serial number as shown in this screenshot:

I have set this up using the following code, CSS:

.greentickactive {
    visibility: hidden;


document.getElementById("copyButton2").onclick = function() {
    document.getElementById("greentickactive").style.visibility = "visible";

With ‘greentickactive’ as the gif CSS class and ‘copyButton2’ representing the trigger for the state change. This is all working, but the gif must be loading when the page loads (I am presuming as I can’t see it on load), and I need it to only load when the button (copyButton2) is clicked. I tried replacing;

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


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

and amending the CSS to;

.greentickactive {
    display: none;

but this causes spacing issues on the page and still doesn’t allow the gif animation to play at the correct time. Does any one know of another method to achieve this or maybe something that’s wrong with this setup?

Read more here: Delay GIF until onclick (CSS/Javascript)

Leave a Reply

Your email address will not be published. Required fields are marked *