SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member tatlar's Avatar
    Join Date
    Jul 2006
    0 Post(s)
    0 Thread(s)

    Ajax or will just some Javascript do? Image refresh on a page...

    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:
    <script language="javascript"  type="text/javascript">
    function reloadImage() {
            var img = '';
            var lastmod = img.lastModified ;
            document.getElementById('imgdiv').src = img ;
            document.getElementById('imglastmod').write = lastmod ;
    setInterval("reloadImage();", 10000);
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
    Here is the relevant part of the page:
    <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.

  2. #2
    Trash Boat mkoenig's Avatar
    Join Date
    Aug 2007
    0 Post(s)
    0 Thread(s)
    I don't know if you can force a page refresh, and if you could it may be consider malicious intent by search engines.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Sydney, NSW, Australia
    25 Post(s)
    1 Thread(s)
    If all you want to do is replace an image then just set the src of the image to the new filename and the browser will download the new image.

    So if your HTML reads:

    <img src="image1.gif" id="imgswap">
    and you want to replace that image with image2.gif you would use the following line of JavaScript.

    document.getElementById(imgswap').src = 'image2.gif';
    The browser will then download the new image (if it isn't already cached) and do the image swap once the new image has been downloaded.
    Stephen J Chapman, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts