javascript image drag issue

[gkelly]

I have a mapping application that works great except for one annoying
thing. This webapp displays a map that I can pan and zoom. It doesn't

do tiling but simply refreshes the map after dragging the image. The
mouseup event will refresh the image. As you know, when you drag the
image you are changing the style.left and style.top properties and when

you do the mouseup you need to set those back to zero and refresh the
image. There doesnt seem to be a way to avoid the slight flicker.
About the best i could accomplish was something like the following:

img.onload = function() {
this.style.left = 0;
this.style.top = 0;
}


img.src = <image url>


in the onload event, setting the style left and top back to zero. This

will happen right when the image is available. well.. almost


as soon as the left and top properties are set the image moves but the
new image is just a fraction of a second behind. What I would like to
do is suspend the layout until I know the image is 'loaded' then set
the left and top to zero and avoid the flicker.


Is there a way to do this? About the only other option is to set the
image to invisible before setting the src property and then setting it
back to visible after setting the left and top back to zero. But this

causes a 'blink' rather than a flicker. I know, not technical terms,
but they are different.


gkelly