[英]Javascript onClick image change
This is my first post here, so please bear with the formatting. 这是我在这里的第一篇文章,因此请耐心等待格式。
What I basically wanted to do was switch from an event to another with an onClick
event. 我基本上想做的是使用
onClick
事件从一个事件切换到另一个事件。
It worked, so I wanted to add a loading image in between the 2 images. 它起作用了,所以我想在两个图像之间添加一个加载图像。
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';
}
It just waits for a while before changing the image, but the loading.gif
does not load at all. 它只需要等待一会儿就可以更改图像,但是
loading.gif
根本无法加载。 On clicking the button, there is a delay, while the original image stays, and then the gerrard.jpg
opens. 单击该按钮时会延迟一段时间,而原始图像会保留
gerrard.jpg
,然后gerrard.jpg
打开。
WHY IS THE LOADING.GIF BEING IGNORED ?? 为什么LOADING.GIF被忽略了?
HTML, not really required here,but still HTML,这里不是必需的,但仍然
<img src="gerrard.jpg" id="details" name="details">
<br/>
<form id="change">
<input type="button" id="change" onClick="gerrard(details)" value="Gerrard"/>
PS- I'm new to JavaScript. PS-我是JavaScript新手。
JavaScript is async language so if you want to set a delay you should use setTimeOut function instead of loop (cause loop will execute parallel with the following code) use like this: 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)
}
In your case: 在您的情况下:
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';
}
So if you want to do it without settimeout, and with loop you need to add changing image inside loop: 因此,如果您要在没有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';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.