How replay an animated .gif header image on refresh

  • Resolved gretche

    (@gretche)


    3 years, 11 months ago

    We have a non-looping animated .gif as the Home page header image, and it is intended to be non-looping.
    But we now want it to replay/restart if the page is refreshed, but nowerdays everything is cached … and this means annimated.gifs tend not to replay.

    On searching for solutions, I see that if the site was written in native HTM we could use javascript to append a random number to the image src. e.g.

    img.src = "your_image_url.gif"+"?a="+Math.random();

    But it’s WordPress, so we can’t edit the inline code(or can we?).

    We have the ‘scripts n styles’ app already installed, can we do something here?

    How could we write a script to append/overwrite the header-image source?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter gretche

    (@gretche)

    In the absence of a response – I kept trying ‘scripts n styles’ and found this works OK – seemingly without a visible double-display on initial opening of the page.

    var img = document.getElementsByClassName("header-img");    // there is only ONE header-img! 
    img[0].src = "https://---redacted.gif---"+"?a="+Math.random();
    • This reply was modified 3 years, 10 months ago by gretche.
    Thread Starter gretche

    (@gretche)

    After further user testing, we noticed that under some conditions occasionaly the .gif DID double-display – or actualy – start to display & play … then get overridden .. and start to play again.

    I therefore placed a ‘placeholder’ .jpg image (i.e. greyed-out & low-res) as the theme’s header, which then gets overridden, by the animated .gif.

    This works well for mobile devices and PCs.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How replay an animated .gif header image on refresh’ is closed to new replies.