How to refresh an image with Jquery a few seconds after page is loaded

I have a webpage with a php generated image that displays a volume gauge. One of the variables in the php image is retrieved from a micro-controller. The variable is not being updated before the page is generated so the volume is displayed incorrectly. I know the image is not being pulled from the cache because if I refresh the page right away the image is displayed correctly.

I am looking for a Jquery script to refresh this one image on the page with an ID of "volumegauge".

<img src="gauge.php?Color=green&MaxScale=79&Value=<Nb_var02>&caption=Volume" id="v开发者_高级运维olumegauge"/>

*This page is only being viewed on an iphone so no need to worry about how it will work in IE.

---

Like this:

$(function() {
    setTimeout(function() {
        $('#volumegauge').attr('src', function(i, old) { return old + "&rand=" + new Date; });
    }, 3000);    //3,000 milliseconds
});

If the image's URL has no query string, replace & with ?.

---

Try using setTimeout() in your $(document).ready() function. If you want to refresh that image asynchronously, you can use $.ajax() or its variants to request the "current" version of the image, then plop that into your page.