I have an image that is constantly updating, lets call it 'new.gif'.
I have a webpage that I display this image on. I want the image to reload every 10 seconds, so the latest image is always displayed, without having to reload the whole page.
Here is my code so far.

Between the <head> tags:
-----------------------
Code:
<script language="javascript"  type="text/javascript">
function reloadImage() {
        var img = 'http://www.mysite.com/images/new.gif';
        var lastmod = img.lastModified ;
        document.getElementById('imgdiv').src = img ;
        document.getElementById('imglastmod').write = lastmod ;
}
setInterval("reloadImage();", 10000);
</script>

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
Here is the relevant part of the page:
Code:
<img id="imgdiv" src="/images/new.gif" />
<p class="italic">Image created: <span id="imglastmod">&nbsp;</span></p>
I had thought that the meta-tags forcing an emptying of the cache and the setInterval function would have forced the latest image to be retrieved. However, this is not the case. I only see the latest image when I do a whole page refresh.

Any clues as to what I am doing wrong?
Also, should I be using Ajax to do this? I know I can use an XMLHttpRequest() to get the contents of a string, but if I use it to return a src value I literally return the contents of the image (ie. all the characters that make up the image, which is essentially junk, such as "GIF89a?
rrr*``??????**!,?I8ͻ`(?di?hlp,tmx|*pH,?Ȥrl:?Шt Hجvz"

Thanks in advance.