Question

我正在尝试显示加载gif，而原始图像src正在使用javascript进行更改。

我的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";
}
}

但是当img src正在改变时，它需要花费大量时间来加载新图像，所以我想在这里使用加载gif，但不知道我该怎么做。

我正在使用wordpress 4.0

任何帮助??

当img src在wordpress中改变时显示加载gif

0 个答案: