Start gif animation not until it's completely loaded

Question

I have a large gif animation on a web page and want to start it not until it's completely finished loading. How would that be possible using JavaScript / jQuery?

Answer 1

Use a placeholder image, and replace it with the animated GIF once that GIF is 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 fire show()

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

Answer 3

You could 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 issue here is that once the image has been downloaded (i.e it is in the browsers cache), there really doesn't seem to be any way of starting it from a particular frame.