How to Force Reload an Animated GIF in Firefox & Wordpress

So as you may know, we are students on a mission to help you. Even if we had Masters or PHds, we will always be students, always learning. One seemingly simple and old problem we came across (and are still learning about) were animated GIFs in browsers.

UPDATE: Browsers may have fixed this issue. So if you don't see a difference, you know why! This article was created in 2013, before browser update surges.

Browsers such as Safari or Chrome easily refresh an animated GIF to its first frame when you simply press Ctrl + R or Cmd + R or F5. However, if you are using Firefox, that GIF will not refresh and simply becomes a static image. This is a no-no and had irritated me in the easiest projects I've ever been given. A visitor would have to press Cmd + Shift + R or Ctrl + Shift + R or Shift F5 to force the image to refresh.

For instance, watch this lil' animation and try to refresh it with one of the refresh commands or the button on your Safari or Firefox browser. What happens?

 

Because this came up again in another project this year for me, I knew I had to figure out a solution. I was animating similar pieces of jewelry together where the charms on them changed. For this to look nice, I needed the animation to refresh on each page. "Nope!", said Firefox. "F#*k your project!"

So I began my search. Many solutions I found involved Javascript which I wouldn't have minded using. However, the worst part was that I was using Wordpress! In Wordpress, a lot of Javascript does not work, especially if you're using it in a post or page. What I could have done was post the Javascript in the header of my Wordpress template, but that would have been extra code that could possibly interfere with other plugins (Hey, with Wordpress you never know).

So, to cut my story short, I found a so-called icky solution for refreshing animated GIFs, posted in Wordpress, displayed in Firefox.

My original img tag looked like this:

<img alt="" border="0" src="/images/scurred-kitty.gif" />

I added this piece of code:

?rand=<?=rand(1,1000);?>

For those whose browser is not rendering the code above correctly, it should look like this: ?rand=<?=rand(1,1000);?>

And ended up with this:

<img alt="" border="0" src="/images/scurred-kitty.gif?rand=<?=rand(1,1000);?" />

Try this on your image! When in the Wordpress text editor for your post or page, go to the HTML side of the editor (if you aren't already there). Find the < img > tag and after the .gif part of the img src, add that little bit of code. This should help force a refresh of your GIF image.

The search isn't over yet!

This is a great solution if you have only a few images on your page. If it comes to more than a few, this can slow down the load time of your page. This lil' bit of code downloads your image from the server again and again as it's refreshed. If you have to many images on one page, a person with a slow connection (such as dial-up (it's still out there hehe)) will be waiting forever for the page to load. It can also take over your bandwidth usage, annd that's bad if you have limits on your web hosting account.

That's it for this one, if you have more solutions to this problem, please leave it in the comments! I would really love to know more solutions, this problem has been around for years!

Add comment


Security code
Refresh

Search

Visit fbetting.co.uk Betfair Review