Swap image src with jQuery Ajax request

Question

I have an <img src="..." /> tag with a default src set. I'd like to have jQuery make an ajax request to get another image and when this new image is fully loaded, set the src of the <img ... /> tag so there's no flicker. I'd prefer not to do any of the preloaders like new Image().src="foo" etc. I'd really like the iamges to load on an ajax request. Any ideas?

Answer 1

This page has example code which does exactly what you are trying to do:

http://jqueryfordesigners.com/image-loading/

Answer 2

You cannot load "a part" of a image onto the webpage so you cannot load it incrementally.

The image can be loaded by using a CSS class point to an image or using Image object of Javascript.

Since CSS cannot notify the page whether the image fully load so the approach new Images().src = "foo" is the best it can do.

Attach an event to it and "decorate" it to reduce flicker with FX effect: fade in, ....