Updating image with new frame - internet explorer displaying partial image

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

score 1 · Accepted Answer · answered Sep 23 '11 at 01:23

1

The flow you want to achieve is:

Load a new image.
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/

answered Sep 23 '11 at 01:23

Robin Andersson

5,150
3
25
44

Thanks. That did the trick. Also a big thanks for posting the code like that. – Lee Loftiss Sep 23 '11 at 01:33
No problems. I can recommend that you change the url to the DTgetImage.php document though, otherwise all of us can see what is happening on your screen. – Robin Andersson Sep 23 '11 at 01:38

score 0 · Answer 2 · edited May 23 '17 at 11:55

0

You can try the onLoad event. Create the image in a hidden div, then attach an onLoad event to it. Once the event fires move the image into position.

But be sure to read img onload doesn't work well in IE7

edited May 23 '17 at 11:55

Community

1
1

answered Sep 23 '11 at 01:09

Ariel

25,995
5
59
69

Updating image with new frame - internet explorer displaying partial image

2 Answers2