Reload GIF on refresh

Hi,

I am building a website and on the reload of a splash landing page i would like the GIF to play.

Currently it plays once and will not reload once I press refresh (unless I hold shift and refresh)

How do I achieve it so it reloads and plays GIF from start each time?

Link to the dummy landing page here: http://sunsets2.webflow.com/

Thanks

Hi @Chris_Reeves , ok, what you need to do, is to set your gif image to load each time the document is refreshed (loaded) to have a time stamp appended to the gif, which forces a reload.

To do this, you should first select your gif image:

and give it a unique ID. For this I gave the image an ID of “splash”:

Then I copied the url to the published gif file, which is:

Next I will set the source of the image with the id = “splash” to the GIF url each time when the page has finished loading or refreshed, and I do this by appending a timestamp as a URL parameter which forces the browser to reload just that one element based on the time stamp.

You need to paste the following code in the Before Body tag panel of the Custom Code section of Site settings.

<script>
    
    $( document ).ready(function() {
        
        var src = "https://daks2k3a4ib2z.cloudfront.net/53969e09e143afa8596e33fa/539644b1e80a7eba3f9f491a_Gif_2.gif?p" + new Date().getTime();
        $("#splash").attr("src", src);
        
    });
    
    
</script>

Here is what it looks like in the Custom Code:

Save your site and publish. Now it should work, each time you refresh, the gif image should reload.

Try this out, it worked for me at least… I hope this helps.

Cheers!

2 Likes

Hi @cyberdave

Thanks so much for the help.

Just to clarify, will i need to host the file away from webflow.

Is https://daks2k3a4ib2z.cloudfront.net/53969e09e143afa8596e33fa/539644b1e80a7eba3f9f491a_Gif_2.gif?p an externally hosted image, or can i just use the webflow image source?

Sorry just a bit confused by that step.

Thanks
Chris

Hi, that image can be hosted where ever you want, I just give example URL, but you can host that image on a cdn or wherever you need. I copied that url, because that was the url of the gif image used when hosting on Webflow.

Hi I think I am being really stupid. But I placed in

And now get this error:

:frowning:

Hi, from your example, you are missing the <script> tag at the beginning. Can you check ?