How to show loading image when a big image is being loaded?

Question

How to show loading image when a big image is being loaded?

As an example in Orkut when viewing a photo in user photo album there is a loading image shown over the photo until the Photo is completely loaded.

I need to implement that feature.

My question is how implement that feature? Is it possible without using JQuery?

Please help.

Answer 1

Edit: Apparently, this has been deprecated. Nothing to see here, move along.

---

No JavaScript or CSS is necessary for this. Just use the built-in, but seldom heard-of, lowsrc property for img elements.

<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">

The basic idea is that you create an additional very compressed, possibly black and white version of your normal image. It gets loaded first and when the full resolution image is downloaded, the browser replaces it automatically. The best part is you don't have to do anything.

Check it out here: http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.html