Image caching with Javascript - ajax reloads them

Question

I've got some AJAX set at an interval to check the server for notifications, etc. Problem is the browser is not caching the images like I thought it would.

Every 2.5 seconds the interval is run and sets the innerHTML of a div from XML, including an image.

The text is fine, but every 2.5 seconds, the image is evidently reloaded, causing the text to shift.

Here is the JS

window.onload = function(){
    inth = setInterval(function(){
        if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();}else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){;
                    try{z=xmlhttp.responseXML.documentElement.getElementsByTagName("activity");}catch (er){z = "";}
                    for (i=0;i<z.length;i++){
                        zz=z[i].getElementsByTagName("time");
                        {try{timez =  zz[0].firstChild.nodeValue;}catch (er){timez = "";}}
                        zz=z[i].getElementsByTagName("str");
                        {try{ustr =  zz[0].firstChild.nodeValue;}catch (er){ustr = "";}}
                        zz=z[i].getElementsByTagName("user");
                        {try{user =  zz[0].firstChild.nodeValue;}catch (er){user = "";}}
                        zz=z[i].getElementsByTagName("act");
                        {try{act =  zz[0].firstChild.nodeValue;}catch (er){act = "";}}

                        ntxt = ntxt + "<div style='border-bottom: 3px dotted #DBDBDB; padding:.5em;'><div><span style='display:inline-block; font-size:14px; font-weight:bold; line-height:14px; margin:0; padding:0;'><img src='avatar.php?size=14&hash="+ustr+"' style='height:14px; display:inline-block;padding:0;margin:0;' />&nbsp;"+user+"</span></div><span style='font-weight:bold;'>"+act+"</span><small> - "+timez+"</small></div>";
                    }
                    ntxt = ntxt + "</div>";

                    }
                document.getElementById('actstream').innerHTML=ntxt;
            }
        }
        xmlhttp.open("GET","ajax_not.php",true);
        xmlhttp.send();

    }, 2500);
    return false;
} 

What is the simplest way I can prevent the images from reloading?

Answer 1

It looks like the "&hash="+ustr parameter that is included with the GET request might be acting as a cache-buster. If that parameter is changing each time, then each iteration will be considered a brand new request.

If that doesn't fix it, you might want to take a look at the Expires and the Cache-Control configuration on the headers.

Answer 2

The simplest way to prevent them from reloading is not to rewrite the HTML and create a new img tag every 2.5 seconds.

It looks like your images are being set as avatar.php?size=14&hash="+ustr+", where ustr is the important bit which identifies the image.

First, I'm guessing that the ustr value is meant to be the same each time? Check that the ustr value isn't changing each request. If it is, then as far as your code can tell, there really is a different image each time. You may want to fix your server code.

Rather than simply blasting a big pile of text into the actstream div's innerHTML property, I'd suggest putting ID's on each component - then you can find and update the time, str, user and act values individually.

Once you've done this, you can then save the previous ustr value (a javascript global variable is an easy place to put this, or you could re-read the src attribute from the image tag itself), and only update the image tag if the value actually changes.

If you must keep this nasty innerHTML blasting code, then I'd suggest checking the headers that your webserver sends when the browser downloads avatar.php. My guess is that you are not setting any Cache headers, and so the browser won't cache previous images.