Quando carregar uma página aparece gif loading

[miro]

Estou usando uma função onclick="loadXMLDoc" que chama outra pagina que carrega na mesma.

Como faço para colocar dentro da função: function loadXMLDoc(url)

Aparecer aquela imagem em loading.gif, depois de carregar aparecer a página.

Função essa:

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
var postcode = document.getElementById('postcode').value;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=stateChange;
  xmlhttp.open("GET",url+"&postcode="+postcode,true);
  xmlhttp.send(null);
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.onreadystatechange=stateChange;
  xmlhttp.open("GET",url+"&postcode="+postcode,true);
  xmlhttp.send();
  }
}

function enviaReq(url, tipo)
{
var postcode = document.getElementById('postcode').value;
var shipping = document.getElementById('shipping_'+tipo).value;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=stateChange;
  xmlhttp.open("GET",url+"&postcode="+postcode+"&shipping="+shipping,true);
  xmlhttp.send(null);
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  xmlhttp.onreadystatechange=stateChange;
  xmlhttp.open("GET",url+"&postcode="+postcode+"&shipping="+shipping,true);
  xmlhttp.send();
  }
}

function stateChange()
{
if (xmlhttp.readyState==4)
  {
  if (xmlhttp.status==200)
    {
    // process whatever has been sent back here
    document.getElementById('test').innerHTML=xmlhttp.responseText;
    }
  else
    {
    alert("...");
    }
  }
}
</script>

Botão esse:

<?php echo SHOPPING_CART_POST_CODE. ': <input type="text" name="postcode" id="postcode" />' . '   <button type="button" onclick="loadXMLDoc(\'' . tep_href_link("shipping_quote.php") . '\')">' . ESTIMATE_BUTTON . '</button>'  ?>