delaying output

theosx · #1 (**permalink**) Sep 18th, 2007, 03:31

I'm trying to make a webpage that will open a number of images at the start, but there needs to be a pause between one image and the next. This is the code I wrote (well, the only difference is that this one is around 150 images short):

Code: Select all

<html>
<head>
</head>
<body>
<script type="text/javascript">
var address = new Array();
address[0]="<img src='a.jpg' alt='a' />";
address[1]="<img src='b.jpg' alt='b' />";
address[2]="<img src='c.jpg' alt='c' />";
address[3]="<img src='d.jpg' alt='d' />";
address[4]="<img src='e.jpg' alt='e' />";
address[5]="<img src='f.jpg' alt='f' />";

for(i=0; i<=5; i++)
{
   setTimeout (document.write(address[i]), (500*i)+1000)
}
</script>

</body>
</html>

After running this, only the first image is displayed on screen. Please help if at all possible.

Rakuli · #2 (**permalink**) Sep 18th, 2007, 05:38

Okay so I can see a couple of problems here.

setTimeout requires a string that will be eval's when it's run so just having a statement won't work and you would be better with a function to call back rather than a for loop.

Code: Select all

<html>
<head>
</head>
<body>
<script type="text/javascript">
var address = new Array();
address[0]="<img src='a.jpg' alt='a' />";
address[1]="<img src='b.jpg' alt='b' />";
address[2]="<img src='c.jpg' alt='c' />";
address[3]="<img src='d.jpg' alt='d' />";
address[4]="<img src='e.jpg' alt='e' />";
address[5]="<img src='f.jpg' alt='f' />";

var timer;
var imgtoWrite = 0;

function imageWrite {
document.write(address[imgtoWrite]);

    imgtoWrite++;
    if (imgtoWrite < address.length)
       timer = setTimeout('imageWrite()', 1500);


}
</script>

</body>
</html>

That will call the function imageWrite every 1.5 seconds until it has been through all the images in the array.

Cheers

theosx · #3 (**permalink**) Sep 18th, 2007, 15:31

I gave it a try but nothing was output to screen

Rakuli · #4 (**permalink**) Sep 18th, 2007, 15:57

Oops, forgot to actually put the initial function call in

After

function imageWrite {
document.write(address[imgtoWrite]);

imgtoWrite++;
if (imgtoWrite < address.length)
timer = setTimeout('imageWrite()', 1500);

}

put

imageWrite();

theosx · #5 (**permalink**) Sep 19th, 2007, 04:02

It works, at least a little bit. The first image is displayed, then the second, and then at the bottom left of IE it says error on page. Firefox displays the first, that blanks out, then nothing.

Rakuli · #6 (**permalink**) Sep 19th, 2007, 04:51

Pretty sure it's because document.write() destroys the whole document.

You may have to try

Code: Select all

<html>
<head>
</head>
<body>
<div id="imageDiv">
</div>
<script type="text/javascript">
var address = new Array();
address[0]="<img src='a.jpg' alt='a' />";
address[1]="<img src='b.jpg' alt='b' />";
address[2]="<img src='c.jpg' alt='c' />";
address[3]="<img src='d.jpg' alt='d' />";
address[4]="<img src='e.jpg' alt='e' />";
address[5]="<img src='f.jpg' alt='f' />";

var timer;
var imgtoWrite = 0;

function imageWrite() {
document.getElementById('imageDiv').innerHTML += address[imgtoWrite];
    imgtoWrite++;
    if (imgtoWrite < address.length)
       timer = setTimeout('imageWrite()', 1500);


}

imageWrite();
</script>

</body>
</html>

That will work.

Cheers

theosx · #7 (**permalink**) Sep 19th, 2007, 04:56

thanks, but I already fixed it. I couldn't have done it without your help.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Php output in to CSS	dhossai	Web Page Design	1	Oct 30th, 2007 18:38
Distinct output using ASP/SQL	bullrider	Classic ASP	0	May 29th, 2007 16:55
displaying the output	madhuri.t	Classic ASP	3	Jul 12th, 2006 15:49
output IE vs. FF	jojo	Web Page Design	5	Dec 29th, 2005 13:35
no output at all -- can't see why in code (???)	jswebdev	PHP Forum	8	Oct 16th, 2005 05:07

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
delaying output