title: Add spinner while new image gets loaded completely
body: <p>The role of the script is to change image.jpg with newimage.gif and vice versa when clicked.<br>
  <strong>Now i want to add a spinner while the newimage.gif loads.<br>
  Something like on 9gag.com/gif .</strong><br>
  Can someone help me please?<br></p>
  
  <p>This is the code:
  html</p>
  
  <pre><code>&lt;img src="/image.jpg" id="pic" onclick="change()"/&gt;
  &lt;a id="first" href="/newimage.gif" style="display:none;"&gt;&lt;/a&gt;
  &lt;a id="second" href="/image.jpg" style="display:none;"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>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;
  }
  }
  </code></pre>