Javascript onClick image change

Question

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.

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. On clicking the button, there is a delay, while the original image stays, and then the gerrard.jpg opens.

WHY IS THE LOADING.GIF BEING IGNORED ??

HTML, not really required here,but still

<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.

I also don't see any jQuery code here. So you want it in jQuery or JavaScript? — NLV
– NLV, Commented May 14, 2014 at 11:30
javascript, sorry, new to stackexchange, was just adding tags. — aryaman
– aryaman, Commented May 14, 2014 at 11:31

deadulya · Accepted Answer · 2014-05-14 11:57:25Z

1

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:

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:

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

edited May 14, 2014 at 11:57

answered May 14, 2014 at 11:36

deadulya

7166 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aryaman Over a year ago

what does this do. could you please explain ?

aryaman Over a year ago

your code isn't working either . the loading image is staying on continuously. [ in the setimeout code ]

deadulya Over a year ago

sorry missclick setTimeout NOT setTimeOut

Collectives™ on Stack Overflow

Javascript onClick image change

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related