Javascript onClick图像更改

Question

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

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

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 打开。

为什么 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';
}

所以如果你想在没有设置超时的情况下使用循环，你需要在循环中添加不断变化的图像:

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';
  }
 }