adding a "loading" image to dynamic images comming from flickr

Question

Is there a method for showing a loading image for dynamic images that are generated using flickr? I have come across a working version of this at the http://community.wacom.com/ site but I have not been able to locate the code to see what they are doing.

Answer 1

You can create an image that shows a loading gif. Then create another image and use the image load event. This provides a callback to you notifying when the flickr image is ready. Then just swap out the loading gif for the image from flickr.

Obviously you will need to change the logic if your using a json feed for the url's and iterating the json object but this should give you the core understanding.

HTML
<image id="image1" src="someLoad.gif" />

js
$('<img />').attr('src', 'someImageFromFlickr.jpg').load( function(){
    $('#image1').attr('src', this.src);
})

Answer 2

You could put two images in your page, the flickr image and a loading image (or text). You would hide the flickr image from the beginning (I think either $(selector).hide() or display:none in CSS would work). In the load handler for the flickr image you would hide() the loading image and show() the flickr image.

Answer 3

I would first try using CSS to make the loading image the background image of the container for my dynamic images.