Javascript Image Reloading; flickers

Question

I have an image, out.jpg, that is updated more or less every second. I want the image displayed in an HTML file, and always up to date. My original solution was to reload the image every half second. This worked fine, but the image would flicker white for a second while it was loading.

Any solutions?

What I tried to do to fix this was to load the image into a separate hidden <img> tag, and then load it into the visible <img> tag, and let it open it from the cache, eliminating the flickering. This worked part of the time, but often the out.jpg would have changed from the time the hidden tag loaded it and the visible tag loaded it... causing more flickering.

Answer 1

how are you loading the image?

probably some preload technique is what you need. you can create an image in jquery and bind the load() event to it. only when that event fires do you swap the img.src of the image in the html

http://api.jquery.com/load-event/

Answer 2

This is how I would do it: make the load in a hidden div. Place an event on that image so that each time it becomes fully loaded, it gets set as the src of another img tag or even as a background of a .

Then I would make sure only to count down 0.5-1 seconds after the image has fully loaded, so that users with slow internet connections (or with a few simultaneous downloads) won't be reloading a new image again and again.