asynchronous loading images with javascript

Question

Is there a method for showing a loading image for dynamic images that are generated using flickr? I have come across a way to do it as shown on the http://community.wacom.com/ site but I have not been able to get it to work, is there something simpler or does anyone have a better explanation than the originator of the technique from [blog.realmofzod.com/.../asynchronous-image-loading-with-jquery/][2]

Answer 1

I just got this working. YMMV:

<img src="images/blank.gif" onload="replaceImage(this, 'flickrthumbnailimageurl')"
width="75" height="75" />

And then replaceImage:

function replaceImage(img, replacementImage)
{
    img.onload = null;
    img.src = replacementImage;
}

blank.gif is just a 1x1 pixel solid gray image. Basically, the idea is that this blank image is loaded and expanded to 75x75 (to preserve layout). That almost immediately fires the onload handler, which changes the image's source to the desired image. It has the effect you desire.