Why does this script start with a blank image?

I'm using a script to scroll through images in an iframe. I can't figure out how to get the script to start on image 1 rather than start blank and then go to image 1.

Here is the script:

<script type="text/javascript">

    var limit = 8;
    var i = limit - 1;

function image_onclick(direction)
{
    i = ( i + ( (direction == 'prev')?limit-1:1 ) ) % limit;

    document.getElementById('image_box').innerHTML = '<img src=images/gallery/image' + (i+1) + '.jpg>';
}
</script>

This is the script in the body,

<div id="leaf1"><button onClick="image_onclick('prev');"><img src="images/leaf.gif" alt="leaf arrow" border="0"/></button></div&开发者_开发问答gt;
<div id="image_box"></div>
<div id="leaf2"><button onClick="image_onclick('next');"><img src="images/leaf2.gif" alt="leaf arrow" border="0"/></button></div>

Use window.load or document.ready method and add following code to it.

 document.getElementById('image_box').innerHTML = '<img src=images/gallery/image1'.jpg>';

Or simply on page

<script language="JavaScript">
 document.getElementById('image_box').innerHTML = '<img src=images/gallery/image1'.jpg>';
</script>

Why not put

document.getElementById('image_box').innerHTML = '<img src=images/gallery/image' + (1) + '.jpg>';

in a document.ready call?

Aren't you missing the inner quotes?

  = '<img src=images/gallery/image' + (i+1) + '.jpg>';

vs

  = "<img src='images/gallery/image" + (i+1) + ".jpg' >";

add onload="image_onclick('next')" to your body tag.

Unless there's a reason to load the initial image dynamically, why not just put the initial image inside the <div>. Using scripting for such a simple task seems overhead.

You can just call image_onclick('next') on document.ready.