function preload(url) {
  // display loading image
  // send the url to be open on the server side. hence, cached.
  document.getElementById('loading').style.visibility = "visible";
  document.getElementById('container').innerHTML = "";
  var obj =  new XMLHttpRequest();
  obj.open("GET", url, true);

  obj.onreadystatechange = function() {		
    if (obj.readyState == 4 && obj.status == 200) {
      // once cached, we hide the loading image and display the content
      if (obj.responseText) {
        document.getElementById('container').innerHTML = '<img src="'+url+'"/>';
        document.getElementById('loading').style.visibility = "hidden";
      }
    }
  };
  obj.send(null);
}