Moving pictures with Javascript

Question

Hi, I have a problem with my site, or at least I think I have. I use a very simple nearly recursive Javascript function to move two pictures. However, on my four year old computer, this is not a smooth movement. I've reduced the size of the pictures, but...

The code is not recursive as I use setTimeout between calls.

The code is the following: (onload)

sImgArray = ["imgLaVera", "imgAlmanzor", "imgRosarito", "imgBaile"];
iImg = sImgArray.length - 1;
setTimeout('playShow(0,' + iImg + ')', 4000);

function playShow(iVisible, iImgs)
{
    if( iVisible < iImgs )
        iLeft = iVisible + 1;
    else
        iLeft = 0;

    imgLeft = document.getElementById(sImgArray[iLeft]);
    imgLeft.style.left = "-" + imgLeft.width + "px";
    playMove(-imgLeft.width, iVisible, iImgs);
}
function playMove(i, iVisible, iImgs)
{
    if( iVisible < iImgs )
        iLeft = iVisible + 1;
    else
        iLeft = 0;

    imgLeft = document.getElementById(sImgArray[iLeft]);
    imgRight = document.getElementById(sImgArray[iVisible]);

    if( i < 0 )
    {
        i = i + 5;
        imgLeft.style.left = (i - 2) + "px";
        imgRight.style.left = (i + imgLeft.width) + "px";
        setTimeout('playMove(' + i + ', ' + iVisible + ',' + iImgs + ')', 75);
    }
    else
    {
        if( iVisible < iImgs )
            iVisible = iVisible + 1;
        else
            iVisible = 0;
        setTimeout('playShow(' + iVisible + ',' + iImgs + ')', 4000)
    }
}

Any suggestions?

Answer 1

It seems like you are advancing your animation every 75 ms. That is ca. 13 steps per second. You need at least 24 steps per second for smooth movement. I recommend 33 ms (ca. 30 steps per second) or 16 ms (60 steps per second). 16 ms is what jQuery uses for its animations (and jQuery is very good at this).

Answer 2

I suggest you use a library to help you achieve that. For example jQuery which has some example there: http://api.jquery.com/animate/

Answer 3

The following settings in playMove will give you what you want:

i = i + 1;
setTimeout('playMove( ... )', 15);

Your animation seemes sluggish because you're changing image positions rarely and with big jumps. If you want it to be smoother you should change the positions more frequently but less pixels in each step.

Old: 5 px / 75 ms
New: 1 px / 15 ms

---

Sidenotes

If you really care for speed, don't select elements in every call of the rendering function (playMove). Do this at the end of showbefore calling setTimeout:

// select elements by their id and replace them in the array
for (var i = sImgArray.length; i--;) {
  sImgArray[i] = document.getElementById( sImgArray[i] );
}

Now you can simply write

sImgArray[iLeft]

instead of

document.getElementById(sImgArray[iLeft])

in playMove and playShow.

Secondly you should try to avoid passing functions as textual parameters because they need to be evaled separately.

// GOOD
setTimeout(function() {
    playShow(iVisible, iImgs);
}, 4000);

// BAD
setTimeout('playShow(' + iVisible + ',' + iImgs + ')', 4000)

Thirdly this is like the ugliest thing I've seen in my life:

setTimeout('show.call(\'index\');', 6000);

Don't use the this reference to pass parameter to a function. That's what normal parameterlist is for.

setTimeout(function() {
    show('index');
}, 4000);

Then your function show becomes something like this:

function show( page ) // pass string as an argument
{
    if ( page == "index" )
    {
    // ...