Javascript onClick图片更改

Question

这是我在这里的第一篇文章，因此请耐心等待格式。
我基本上想做的是使用onClick事件从一个事件切换到另一个事件。

它起作用了，所以我想在两个图像之间添加一个加载图像。

function gerrard(details) {
   var a=0;
   details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
   while (a<1000000000) {
      a=a+1;
   }
   details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';
}

它只需要等待一会儿就可以更改图像，但是loading.gif根本无法加载。 单击该按钮时会延迟一段时间，而原始图像会保留gerrard.jpg ，然后gerrard.jpg打开。

为什么LOADING.GIF被忽略了？

HTML，这里不是必需的，但仍然

<img src="gerrard.jpg" id="details" name="details">
<br/>
<form id="change">
<input type="button" id="change" onClick="gerrard(details)" value="Gerrard"/>

PS-我是JavaScript新手。

Answer 1

JavaScript是一种异步语言，因此，如果要设置延迟，则应使用setTimeOut函数而不是循环（因为循环将与以下代码并行执行）如下使用：

function gerrard(details) {
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
//here we waiting fo 5 secs, and then changing image
setTimeout(
    function(){details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';}, 5000) 
}

在您的情况下：

function gerrard(details) {
var a=0;
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
while (a<1000000000) {
   a=a+1;
}
 //while loop still going execute the code go next and changing image
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';
}

因此，如果您要在没有settimeout的情况下执行此操作，并且需要使用循环，则需要在循环内添加更改的图像：

function gerrard(details) {
var a=0;
details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/loading.gif';
while (a<1000000000) {
  a=a+1;
  if (a==999999999)
  details.src='file://macintosh%20hd/Users/megaestore/Desktop/voting/gerrard.jpg';
  }
 }