Start gif animation before full download

Question

I have a big gif animation on a webpage and you want to run it only after it is fully loaded. How is this possible with JavaScript / jQuery?

Answer 1

Use a placeholder image and replace it with an animated GIF after the GIF has fully loaded:

<img id="anim" src="placeholder.gif"> 

JS:

 var myanim = new Image(); myanim.src = '/img/actions.png'; myanim.onload = function() { document.getElementById('anim').src = myanim.src; }​ 

http://jsfiddle.net/mblase75/6XTg7/

Answer 2

You can hide GIFs with CSS (or JS replacing them with a placeholder), and when GIFs are loaded, you can run show ()

$('img[src$=".gif"]').load(function(){$(this).show())

Answer 3

You can hide it until it is fully loaded.

 <!--- this uses jquery !--> <script type="text/javascript"> var image_url = "http://media.tumblr.com/tumblr_m4doax3R071r9c1z7.gif"; var image = $('<img />').load(function(){ $(this).show(); }).attr('src', image_url).hide(); $('body').append(image); </script> 

The problem is that after loading the image (i.e. in the browser cache) there really is no way to start it from a specific frame.

Answer 4

You have no control over the gif-animation via javascript, so you need to implement some kind of hack. You have to make it hidden at the beginning. Instead of the actual image, you can put a div with the dimensions of the actual image and with text like "wait".

When the image is loaded in the browser, you can replace the div with the image. And at that moment the animation will begin