Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

gif animation not playing on refresh

First time I view the page with an animated .gif it plays fine on page load (lasts about 2 secs).

On refresh (F5), the .gif no longer plays and only the last frame of gif animation is shown.

Is there anything I can do do to make sure it plays everytime?

like image 357
Feeney Avatar asked Jul 12 '12 15:07

Feeney


People also ask

Why does my GIF not play automatically?

Why won't GIFs play in Google Images? Animated GIFs don't play in Google images search results on Google Chrome browser or other browsers because there is no built-in option in browsers to do that. You need to click on an animated GIF's thumbnail in order to play it.

How do I get GIFs to play in Chrome?

To use it, you'll just need to install a copy of GoogleGIFs for your Chrome Web browser. Next, head to Google Images and search for "[subject] gif." You'll see the results load in all of their animated glory. What do you think of this extension in comparison to Giphy? Share your thoughts in the comments.

How do I set my GIF to play on loop?

Click Browse to upload the GIF from your computer, or enter the URL next to Open From URL and click Go. Click Animation from the menu at the top. Click Edit GIF Animation. Click the drop-down menu next to Looping and choose how many times you want the GIF to loop.

Why is my GIF lagging?

The main reason why your GIFs load so slowly is likely because you have too many frames in the GIF. Next time, delete one frame for every two that you use. Reddit user MichaelTunnell found that this method makes GIFs much faster and fixes the problems that can come from opening the GIF in different browsers.


2 Answers

For the PHP the much better option then using date("Ymdgis"); is using time(), like this:

<img src="picturePath.gif?<?php echo time();?>" />
like image 62
pcigler Avatar answered Nov 02 '22 20:11

pcigler


Strange behavior that's affects every browser..
I usually refresh it manually with this script (it uses jQuery)

<img id="gif_animata" src="picturePath.gif">
<script type="text/javascript">
    var gifSource = $('#gif_animata').attr('src'); //get the source in the var
    $('#gif_animata').attr('src', ""); //erase the source     
    $('#gif_animata').attr('src', gifSource+"?"+new Date().getTime()); //add the date to the source of the image... :-) 
</script>

This will refresh the src of the image adding the current date, so the browser will re-load it, thinking that's a new image.

Otherwise in PHP way (I prefer this one):

<img src="picturePath.gif?<?php echo date("Ymdgis");?>" />

//for the browser it will seems that's a new picture!
<img src="picturePath.gif?2012092011207">
like image 36
sekmo Avatar answered Nov 02 '22 21:11

sekmo