How to set a placeholder for a Image control (while it downloads)?

Question

I have an app that show a list of images. The image source is set to a http URL, and the images are downloaded and display automatically.

However, while the app is taking time to download, the image control shows nothing. The user experience is not good this way.

How may I display a loading placeholder image, or a loading gauge, for each of the image control?

Answer 1

Interesting how many options there are for tackling this problem.

You might also like to consider Ben Gracewood's image caching implementation or what appears to be a development on that idea in his blog comments.

One-time Cached Images in Windows Phone 7 « Ben.geek.nz

Peter Nowaks Mobile Blog - “Intelligent” Image Caching for WP 7

Some background on the discussion leading up to this here if it's of interest.

Image control cache duration?

Answer 2

In addition to the 2 other suggestions (from Josh & Mick) you could display a placeholder in the xaml and then, in code, download the actual desired image in the background using HttpWebRequest. Then when the image has fully downloaded save it to isolated storage and then update the source to the displayed image.

Yes this is more complex than the other solutions but would simplify the visual tree and avoid a blank image being displayed while the image is downloaded.
It would also give you offline caching of images too.

Answer 3

While an image is loading, it is drawn transparently. You can use this to your advantage to display an element underneath the image while it is loading. For example, you could have a stock image that is bundled with your XAP that represents a default avatar for example. Or you could display a XAML loading animation. Then when the image is finished loading, it will obscure the element behind it.

Mick's suggestion is a good one if you need to minimize your visual tree and if your scenario allows for a code solution. This suggestion is not perfect but it does make it easier to deal with the case where your placeholder image is unscaled/centered but the loaded image is scaled/stretched.

Answer 4

You could set the image source to your placeholder then when ImageOpened fires, change it to the remote url and let that run it's course.