Using AJAX / jQuery to refresh an image

Question

This is probably a simple question but I am stumped and just don\'t know where to start.

I have a PHP script (image_feed.php) that returns a URL to an image. Every t

Answer 1

I suggest you use jQuery 'onImagesLoad' Plugin This provides you with a callback when an image has finished loading.

When you receive new image URL from server, you create a new object with src="new_url_from_server" and attach 'onImagesLoad' callback to it. When your callback is called, your image has finished downloading.

Now you can just replace the 'src' attribute of old img object with new_url_from_server. Since new image is already avaiable in cache, it will not be downloaded again and will be immediately displayed!

Aletrnatively, you can hide the old image and add this new image to DOM (not required if above works correctly)

Some bare bones sample could be like this: