ajax preload image

Ret:

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

til:

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById("loadimg").parentNode.removeChild(document.getElementById("loadimg"));
document.getElementById(containerid).innerHTML=page_request.responseText
}else{
var newElement=document.createElement("img");
newElement.setAttribute("id","loadimg");
newElement.setAttribute("src","loading.gif");
document.getElementsByTagName("body")[0].appendChild(newElement)
}

Så vil billedet blive indsat i bodysektionen.

Scriptet virker til dels, der kommer tre nye load billeder frem hver gang en side hentes og de forsvinder ikke igen, så når man har fortaget 3 side hentninger er der 9 synlige loadbilleder.

Nå ja, det er klart. Brug i stedet:
-----------------------------------
var loadedobjects=null;
var rootdomain="http://"+window.location.hostname;

function ajaxpage(url, containerid){
var page_request = false;
if (window.XMLHttpRequest) // Mozilla, Safari etc
page_request = new XMLHttpRequest();
else if (window.ActiveXObject){ // IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false;
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true);
page_request.send(null);
var newElement=document.createElement("img");
newElement.setAttribute("id","loadimg");
newElement.setAttribute("src","loading.gif");
document.getElementsByTagName("body")[0].appendChild(newElement)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById("loadimg").parentNode.removeChild(document.getElementById("loadimg"));
document.getElementById(containerid).innerHTML=page_request.responseText
}

Det virker perfect !

Jeg har dog lige en spørgsmål, hvordan får jeg loading billedet placeret i midten af den div som jeg loader siderne ind i?

Evt. ved at tilføje:
newElement.style.margin="auto";
newElement.style.top="50%";

efter:
newElement.setAttribute("id","loadimg");

Tror, det kunne virke.

<ole>

- men derudover har det ikke meget med Ajax at gøre. Du bør bruge 'post' i stedet for 'get', som giver memory problemer i IE - og så bør du undgå innerHTML, som er tussegammel, invalid kode fra midthalvfemserne. Du bør i stedet bruge DOM til indsættelse af data.

Ved du forøvrigt, at indhold, der er hentet med Ajax ikke indekseres? Kun Flash er ligeså godt til at skjule indhold for søgemaskiner  ;o)

/mvh
</bole>