Question

At this URL, you can see an image that is being loaded with jQuery: http://projects.kleelof.com/dtcapture/

As soon as the image is loaded, the script loads it again. Right now it is a static image. But when the full app is running, it displays different images.

Anyway…the problem…

In Firefox and Chrome, the previous image remains until the new one is loaded. However, in IE, it removes the last image and fills in the space with the new image as it downloads. So you get this black box that is slowly filled with the image.

Any ideas how to get IE to replace the current image after the new image is downloaded?

lee

Answer 1

The flow you want to achieve is:

1. Load a new image.
2. When the new image is loaded
   • Remove the old image
   • Make a request for a new image (loop)

Here is a sample that does that: http://jsfiddle.net/933hg/