Home|Sitemap|Contact

How can you load an external image without loading the cached copy from the browser?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<title>rodsdot.com :: reading image from server with no preload and no cache.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<script type="text/javascript">
var sending=false;

//create the Cross-browser XMLHttpRequest object
function getFile(pURL) {
   if (window.XMLHttpRequest) { // code for Mozilla, Safari, etc 
      xmlhttp=new XMLHttpRequest();
      if (xmlhttp.overrideMimeType) {
         xmlhttp.overrideMimeType('text/xml');
      } 
      xmlhttp.onreadystatechange=postFileReady;
      xmlhttp.open("GET", pURL, true);
      xmlhttp.send(null);
   } else if (window.ActiveXObject) { //IE 
      xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
      if (xmlhttp) {
         xmlhttp.onreadystatechange=postFileReady;
         xmlhttp.open('GET', pURL, false);
         xmlhttp.send();
      }
   }
}

// function to handle asynchronus call
function postFileReady() {
   if (xmlhttp.readyState==4) { 
      if (xmlhttp.status==200) { 
         document.getElementById('theExample').innerHTML=xmlhttp.responseText;
      }
   }
}

var currentImage = 1;

function rotateImage() {
   var iSrc = '/ee/images/image' + currentImage + '.jpg';
   getFile('http://www.rodsdot.com/ee/getImage1.asp?img='+iSrc);
   currentImage += 1;
   if (currentImage==4) {
      currentImage=1;
   }
   setTimeout('rotateImage();',2000);
}
</script>
</head>

<body onload="rotateImage();">
  <div id="theExample">...</div>
</body>

</html>


<%
' getImage1.asp
' no browser caching of this page
Response.Expires=-1
Response.ExpiresAbsolute = Now() - 1

' do not allow proxy servers to cache this page !! to be used on all pages
Response.CacheControl="private"
Response.CacheControl="no-cache"
Response.CacheControl="no-store"

image = request.querystring("img")
response.write "<img src=""" & image & """ border=""0"">"
%>


<?php
// getImage1.php
// Date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

// always modified
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");

// HTTP/1.1
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);

// HTTP/1.0
header("Pragma: no-cache");

$image = $_GET['img'];
echo '<img src="' . $image . '" border="0">';
?>