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

为什么加载.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函数而不是loop（因为循环将与以下代码并行执行）使用如下：

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

Javascript onClick图像更改

1 个答案: