Gif Player in JavaScript
At some web pages you can notice that gifs aren’t playing at the beginning but they are waiting for user to click on them to start playing. This trick can prevent from unnecessary data downloading and from overhelming the computer by displaying the huge amount of animated pictures. How is it done?
You can peek how the result of this tutorial should look like on JSFiddle.
First of all there is no trivial way to stop and control the motion of the gif. In fact there are two separated images – the static one which shows the first frame of the gif and the gif itself. To get the first frame of the gif you can use this online tool: www.gif-explode.com
The trick is to display the static image with the button on it, started downloading the gif when the button is clicked and when the loading is done swap the static image with the animated one.
The html container of the gif player looks like this:
When the play button is clicked the play class become hidden and the spinner class become visible. Also the src attribute of the animated image is added with image_anim.gif value. Adding the src attribute will start the gif downloading.
When the gif finishes it’s loading the spinner class and the still image become hidden. The animated image become visible.
Now when the gif is loaded we can click the player to switch between the animated and the still image. The still image and the play class visibility will be switched, but the animated image has to have not only visibility switched, but also have removed or added the src attribute, because when the player stops, then the animated gif has to be stopped and does not play in the background. This will cause the situation that the gif will be played always from the beginning, but there is no easy way to pause the gif.
To have this flow well organized the gif player has few states:
You can play around with it using JSFiddle or download the sources from GitHub.
You can peek how the result of this tutorial should look like on JSFiddle.
First of all there is no trivial way to stop and control the motion of the gif. In fact there are two separated images – the static one which shows the first frame of the gif and the gif itself. To get the first frame of the gif you can use this online tool: www.gif-explode.com
The trick is to display the static image with the button on it, started downloading the gif when the button is clicked and when the loading is done swap the static image with the animated one.
The html container of the gif player looks like this:
<div class="gifcenter">
<div class="gifcont">
<img class="animated">
<img class="still" src="image.png">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
<div class="play">
<div class="play_button"></div>
</div>
</div>
</div>- gifcenter – is the class for nice center aligning only;
- gifcont – is the main container for the player;
- animated – is an animated gif. Notice that for now it is empty;
- still – is a still image, in this case called image.png;
- spinner – is a block with the loading animation. I used one of these awesome spinners: tobiasahlin.com;
- play – is a round container for the play button;
- play_button – is a black triangle that represents the play button;
When the play button is clicked the play class become hidden and the spinner class become visible. Also the src attribute of the animated image is added with image_anim.gif value. Adding the src attribute will start the gif downloading.
When the gif finishes it’s loading the spinner class and the still image become hidden. The animated image become visible.
Now when the gif is loaded we can click the player to switch between the animated and the still image. The still image and the play class visibility will be switched, but the animated image has to have not only visibility switched, but also have removed or added the src attribute, because when the player stops, then the animated gif has to be stopped and does not play in the background. This will cause the situation that the gif will be played always from the beginning, but there is no easy way to pause the gif.
To have this flow well organized the gif player has few states:
- freeze – the initial state when the still image is not loaded yet. Nothing can happen when this state is current;
- unloaded – the state when the still image is loaded, but the animated one not. Only the still image and the play class are visible;
- loading – the state when the play button was clicked and the gif is loading. Only the still image and the spinner class are visible;
- playing – the state when the gif has been downloaded and it’s playing now. Only the animated image is visible;
- stopped – the state when the gif has been downloaded but it isn’t playing now. Only the still image and the play class are visible. The animated image has no src attribute here;
$(document).ready(function() {
$('.gifcont').each(function() {
var self = $(this);
this.gp = new gifPlayer(self);
});
});You can play around with it using JSFiddle or download the sources from GitHub.