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?

You can't stop/start gif animation. You could either hide it and show it when it loads, or show a static image (jpg, for example) and swap it for the gif once it's loaded. — Reinstate Monica Cellio, Nov 15 '12 at 14:32
possible duplicate of [Javascript to only display animated gif when loaded](http://stackoverflow.com/questions/5826747/javascript-to-only-display-animated-gif-when-loaded) — axel_c, Nov 15 '12 at 14:35

score 7 · Accepted Answer · answered Nov 15 '12 at 14:34

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/

score 1 · Answer 2 · answered Nov 15 '12 at 14:32

1

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())

answered Nov 15 '12 at 14:32

banzsh

540
1
4
18

score 1 · Answer 3 · answered Nov 15 '12 at 14:44

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.

score 0 · Answer 4 · answered Nov 15 '12 at 14:38

You have no control over gif animation through javascript, so you have to implement some sort of a hack. You have to make it hidden in the beginning. Instead of the actual picture you can put a div with the dimensions of the actual picture and with text like "wait".

When the image is downloaded in the browser you can substitute div with an image. And at that point of time animation will start

Start gif animation not until it's completely loaded

4 Answers4