Show loading gif while the img src is changing in wordpress

Question

I am trying to show a loading gif while the original image src is changing using javascript.

my html

<div id="sensorimgdiv" style="display: block;">
<img src="myinitilaimg.png" alt="siimg" usemap="#simap" id="si">

<map name="simap">

  <area shape="circle" coords="529,271,80" alt="realtime" id="realtime" onclick="getImg(this.id)" style="cursor:pointer;">
  <area shape="circle" coords="169,514,80" alt="compare" id="compare" onclick="getImg(this.id)" style="cursor:pointer;">
  <area shape="circle" coords="94,276,80" alt="dashboard" id="dashboard" onclick="getImg(this.id)" style="cursor:pointer;">
  <area shape="circle" coords="462,517,80" alt="industrypacks" id="industrypacks" onclick="getImg(this.id)" style="cursor:pointer;">
  <area shape="circle" coords="310,99,80" alt="integrate" id="integrate" onclick="getImg(this.id)" style="cursor:pointer;">

</map>
</div>

js

function getImg(id)
{
//alert(id);
if(id == 'realtime')
{
     document.getElementById("si").src = site_url+"/wp-content/uploads/2014/11/img1.png";
}
else if(id == 'compare')
{
     document.getElementById("si").src = site_url+"/wp-content/uploads/2014/11/img2.png";
}
else if(id == 'dashboard')
{
     document.getElementById("si").src = site_url+"/wp-content/uploads/2014/11/img3.png";
}
else if(id == 'industrypacks')
{
     document.getElementById("si").src = site_url+"/wp-content/uploads/2014/11/img4.png";
}
else if(id == 'integrate')
{
     document.getElementById("si").src = site_url+"/wp-content/uploads/2014/11/img5.png";
}
}

But when the img src is changing it is taking a lot of time to load the new image, so I thought of using a loading gif here, but not getting idea how can I do that.

I am using wordpress 4.0

Any help??