Ajouter spinner tandis que la nouvelle image est complètement chargé

Le rôle de ce script est de changer image.jpg avec newimage.gif et vice versa quand on clique dessus.

Maintenant, je veux ajouter un compteur tandis que le newimage.gif les charges.

Quelque chose comme sur 9gag.com/gif .


Quelqu'un peut-il m'aider s'il vous plaît?

Voici le code:
html

<img src="/image.jpg" id="pic" onclick="change()"/>
<a id="first" href="/newimage.gif" style="display:none;"></a>
<a id="second" href="/image.jpg" style="display:none;"></a>

javascript

function change(){
var imag = document.getElementById('pic').src;
var img = imag.slice(-3);
var img1 = document.getElementById('second').href;
var imag2 = document.getElementById('first').href;
if(img == 'gif') {
document.getElementById('pic').src=imag2;
//   here the newimage.gif changes to image.jpg 
} else {
//   here the image.jpg changes to newimage.gif
//   i think here should be the code that will display a spinner while the image.gif loads completely
document.getElementById('pic').src=img1;
}
}
InformationsquelleAutor Marian07 | 2014-01-21