Newbie here, please be kind.

Want to reload a new image during executing a javascript. How can I do this?
Attached below is my trial script (problem portion only). It's intention is to
display 111.jpg for 2 seconds, followed by 222.jpg and 333.jpg. The actual
behavior is that it displays blank.jpg for six seconds then displays 333.jpg.

I think that the
<IMG src="111.jpg" ,,,,,,,
does not take place during wait loop, as script is running.

Can any guru here help me how I can resolve this?
AdvThanksance
Tak

----- attachment -----
<html><head>
<script type="text/javascript">
function picStart() {
var a = new Array(3);
a[1]="111.JPG";
a[2]="222.JPG";
a[3]="333.JPG";
for(i=1;i<4;i++) {
document.getElementById("mainpic").src=a[i];
var time=new Date(); t=time.getTime();
do { var time=new Date();tNew=time.getTime();
// alert(tNew+" "+t);
}while(tNew-t < 2000);
}
}
</script>
</head>
<body>
<A href="javascripticStart()">Click Start</a><br>
<IMG id="mainpic" src="blank.jpg" width="800" height="800">
</body>
</html>
--------- end attachment ------