What is the best way to add a progress bar to an image while it is loading?

I have a custom gallery plugin that I have created and I am wanting to add a progress bar or a progress gif in place of all images before they are loaded.

I know that I could potentially use the jQueryUI progress bar for this, but I do not want to use a jQueryUI theme, and I do not know how to add it to an image that is currently loading.

My other two options are, create my own progress bar, or use an animated gif. Currently I am leaning towards a gif because it would be a lot easier to add, and I would not have to theme it.

However it would be pretty cool to have the progr开发者_JAVA百科ess bar if it is relatively simple to add to an image. Does anyone have an example of how to add a jQuery progress bar, or some other progress bar to an image while it is loading?

---

CSS

img {
    background: transparent url(http://i.stack.imgur.com/4PBC8.gif) no-repeat scroll center;
}

Demo

---

indeterminate progress indicators are much more widely used on web apps (outside of file uploaders). How would you measure the percent completed? I don't know of a way.

Another problem with non-indeterminate progress indicators (e.g.: a progress bar): even if you can identify a way to partition your work into chunks, there is basically no way to guarantee that each chunk will take the same amount of time. How many times have you gotten pissed off at a progress bar that grinds through the first 5% and then instantly jumps to 100%?

I don't like saying "it's impossible" because that's a hard absolute, and I'd sure look like a goofball when the next answer posted shows that I was wrong. How about I haven't yet found a way?