Want to pause a section of my code... How?

[StefanRSA]

Hi, I am working on an image gallery that display thumbnails and display bigger image onclick. I now have an animated gif that display until the image is loaded.

 

I want the animated give to display for about 1.5sec before the bigger image display. What should I do to my code to pause or have a delay before the big image are loaded?

 

My Code in head is as follow:

<script type="text/javascript"> 
// Preload the loading image 
var loadingImg = new Image(); 
loadingImg.src = 'images/wait.gif'; 
function changeImage(filename) 
{ 
// Show the loading image 
document.mainimage.src = loadingImg.src; 
var bigImg = new Image(); 
bigImg.onload = function() { 
// When the big image finishes loading, swap the main img with it 
document.mainimage.src = bigImg.src; 
} 
bigImg.src = filename; 
} 
</script>

And in body:

<a href="javascript:changeImage('img/main1.jpg')">
<img src="img/thumb1.jpg">
</a><a href="javascript:changeImage('img/main2.jpg')">
<img src="img/thumb2.jpg">
</a><a href="javascript:changeImage('img/main3.jpg')">
<img src="img/thumb3.jpg">
</a><br>
<img src="" name="mainimage" alt="" />

[KevinM1]

Pick your poison:

 

setTimeout()

 

setInterval()

 

Most likely, you'll want to use setTimeout().

[StefanRSA]

Thanks, I am new to JS and not sure where or how to put it.

Tried this but now the big image is not loaded after the wait.gif is activated? The poison killed my code 

 

<script type="text/javascript"> 
// Preload the loading image 
var loadingImg = new Image(); 
loadingImg.src = 'images/wait.gif'; 
function changeImage(filename) 
{ 
// Show the loading image 
document.mainimage.src = loadingImg.src; 

var bigImg = setTimeout(new Image(),3); // TESTING THE DELAY ----- NOT WORKING
bigImg.onload = function() { 
// When the big image finishes loading, swap the main img with it 

document.mainimage.src = bigImg.src; 
} 
bigImg.src = filename; 
} 
</script> 

[StefanRSA]

And if I do this, the main image display but no delay....?

 

<script type="text/javascript"> 
// Preload the loading image 
var loadingImg = new Image(); 
loadingImg.src = 'images/wait.gif'; 
function changeImage(filename) 
{ 
// Show the loading image 
document.mainimage.src = loadingImg.src; 
var bigImg = new Image(); 
bigImg.onload = function() { 
// When the big image finishes loading, swap the main img with it 
setTimeout(document.mainimage.src = bigImg.src,3000);
} 
bigImg.src = filename; 
} 
</script> 

[StefanRSA]

Anybody???