RobB wrote:
Tony wrote: I'm having a problem with the execution of some code and the
timing. Basically, I want each cell in a table of images to change,
followed by a small delay, so that it creates an animation that wipes across the screen, rather than changing all at once.
The code I'm using is:
function swapimg(cell,src){
document.images[cell].src = src;
}
function fillin(){
for(y=0;y<height;y++){
for(x=0;x<width;x++){
cellid=x+"x"+y;
imgsrc="blanksquare.jpg";
setTimeout("swapimg('"+cell+"','"+imgsrc+'")",100) ;
}
}
}
That should cause there to be a delay, then the image is replace,
then the next iteration of the loop begins, right?
Not really. setTimeout/Interval launch new threads of execution after
the timer expires: when they're called, the timer is simply set, and
the script moves on. For all intents and purposes, all the timers are
being set (almost) simultaneously, with the result that...
[ .. ] the delay still occurs, but the images are
all updated at once, apparently when the script completes
execution.
Is there any way to get each image change to display before
changing the next image?
(snip)
Yes - set each timer with a longer, stepped delay:
function fillin(){
var m = 1;
for(y=0;y<height;y++){
for(x=0;x<width;x++){
cellid=x+"x"+y;
imgsrc="blanksquare.jpg";
setTimeout("swapimg('"+cell+"','"+imgsrc+'")", 100 * m++);
}
}
}
Why call a variable 'cellid' when it's an image name? Confusing.
Can't tell what 'height' & 'width' signify (row? column?). 'imgsrc' belongs
outside the loop. All variables should be declared locally to
restrict their scope.
Identifiers (names, ids) shouldn't begin with numbers, as parser may
take this as an indication that they *are* numbers. Probably a better
way to execute this sequence using DOM structure instead of naming
kludges...
Hi Tony.
If you're swapping images, you might consider using CSS instead of src
resetting. This avoids messy (and sometimes unpredictable) preloading
of the new images, at the possible cost of a brief wait up front for
the user. Depends on how heavy those pics are. Sample:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.graphxkingdom.com/graphics/">
<style type="text/css">
body {
background: #404044;
}
table {
width: 340px;
margin: 100px auto;
border: 3px #fff ridge;
background: #ccc;
}
td div {
position: relative;
width: 38px;
height: 38px;
border: 1px #000 solid;
}
td img {
position: absolute;
left: 3px;
top: 3px;
width: 32px;
height: 32px;
}
</style>
<script type="text/javascript">
function seqSwap(row_id)
{
var row, cells, cell, img, i = 0;
if ((row = document.getElementById(row_id))
&& (cells = row.cells))
{
while (cell = cells[i])
{
img = cell.getElementsByTagName('img').item(0);
if (img && img.style.zIndex != '99')
{
img.style.zIndex = '99';
return;
}
i++;
}
}
clearInterval(seqSwap.timer);
if ('undefined' != typeof nextSeq)
nextSeq(); //call next sequence (if defined)
}
function startSeq(row_id)
{
if ('undefined' != typeof seqSwap)
seqSwap.timer = setInterval('seqSwap("' + row_id + '")', 100);
}
function nextSeq()
{
startSeq("r1");
}
window.onload = function()
{
if (document.getElementById
&& document.getElementsByTagName)
{
setTimeout('startSeq("r0")', 2000);
}
}
window.onunload = function()
{
if (null != seqSwap.timer)
clearInterval(seqSwap.timer);
}
</script>
</head>
<body>
<table>
<tbody>
<tr id="r0">
<td><div><img src="food/food02.gif"><img
src="mammals/mam01.gif"></div></td>
<td><div><img src="food/food06.gif"><img
src="mammals/mam02.gif"></div></td>
<td><div><img src="food/food08.gif"><img
src="mammals/mam03.gif"></div></td>
<td><div><img src="food/food09.gif"><img
src="mammals/mam04.gif"></div></td>
<td><div><img src="food/food10.gif"><img
src="mammals/mam05.gif"></div></td>
<td><div><img src="food/food11.gif"><img
src="mammals/mam06.gif"></div></td>
<td><div><img src="food/food12.gif"><img
src="mammals/mam07.gif"></div></td>
<td><div><img src="food/food13.gif"><img
src="mammals/mam08.gif"></div></td>
<td><div><img src="food/food14.gif"><img
src="mammals/mam09.gif"></div></td>
<td><div><img src="food/food18.gif"><img
src="mammals/mam10.gif"></div></td>
</tr>
<tr id="r1">
<td><div><img src="toys/toy02.gif"><img
src="computers/comp01.gif"></div></td>
<td><div><img src="toys/toy06.gif"><img
src="computers/comp02.gif"></div></td>
<td><div><img src="toys/toy08.gif"><img
src="computers/comp03.gif"></div></td>
<td><div><img src="toys/toy09.gif"><img
src="computers/comp04.gif"></div></td>
<td><div><img src="toys/toy10.gif"><img
src="computers/comp05.gif"></div></td>
<td><div><img src="toys/toy11.gif"><img
src="computers/comp06.gif"></div></td>
<td><div><img src="toys/toy12.gif"><img
src="computers/comp07.gif"></div></td>
<td><div><img src="toys/toy13.gif"><img
src="computers/comp08.gif"></div></td>
<td><div><img src="toys/toy14.gif"><img
src="computers/comp09.gif"></div></td>
<td><div><img src="toys/toy18.gif"><img
src="computers/comp10.gif"></div></td>
</tr>
</tbody>
</table>
</body>
</html>
setInterval is more logical for animations, where the idea is to keep
going until you're ready to stop - not to keep going & stopping until
you're ready to stay stopped. Runs more efficiently, and no memory leak
issues afaik.