showing loading image on ajax call

Hello, i've been looking around on how to show a loading image on ajax call but either the code doesnt work or either, i cant test the loading image since the ajax call is too fast to show.

can sombody give me suggestions?

i work with a javascript functions that uses the responseText utility and that is triggered by an onblur event.

what i tested so far:

so my function populates the city and state on zipcode entry. I've put this in the function

$("#city|| state").empty().html('<img src="/Images/ajax-loader.gif" />');   

    || didn't work

another thing:

if (xmlhttp.readyState==4) {
while (xmlhttp.readyState == 3) { 
}
}

didn't work either.

Another aspect, to preload an image:

could this be possible ?

if (document.images){
preload_image.src ="/Images/ajax-loader.gif";
}

Any better solutions to preload images?

Any help welcome.

Thanks in advance

I've never used a preloader, but I don't see any reason it wouldn't work, all you really need to do is for your if(xmlhttp.readyState == 4){...} attach an elseif directly after the closing } of the if to show your loading gif on the div while it's in a loading state, or whatever other state you want coverd.

but the div i show my loader image is not the same as where the content of responseText comes. so when i use your example the image stays displayed for eternally.

function fillcitystate(controlname)

{

var zipstring = "";

xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET", "postcode.php?postcode=" + controlname.value, true);

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4)

{

var zipstring = xmlhttp.responseText;

if (zipstring!="Error")

{

var ziparray = zipstring.split("|");

document.getElementById("gemeente").value = ziparray[1];

document.getElementById("provincie").value = ziparray[2];

}

}

else if (xmlhttp.readyState==3){

document.getElementById("load").innerHTML = '<img src="Images/ajax-loader.gif" border="0" alt="Loading, please wait..." />';

}

}

xmlhttp.send(null);

And if i use :

while (xmlhttp.readyState!==4){

document.getElementById("load").innerHTML = '<img src="Images/ajax-loader.gif" border="0" alt="Loading, please wait..." />';

}

It eats my CPU and my browser gets stuck :S

What the f* is wrong ?

<< Moving this thread to appropriate forum >>

And if i use :

 

while (xmlhttp.readyState!==4){

document.getElementById("load").innerHTML = '<img src="Images/ajax-loader.gif" border="0" alt="Loading, please wait..." />';

}

 

It eats my CPU and my browser gets stuck :S

Right, because it is basically repeating that process as quickly as it can over and over again until the condition is false. All  you need to do is set the loading image ONCE as soon as the AJAX call is made. Then once the response is returned from the call remove the image.

I'm sure there are a ton of resources out there to show how to do this, but here is some sample code that should work, but I'm not going to test it

function fillcitystate(controlname)
{   
    var zipstring = "";
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "postcode.php?postcode=" + controlname.value, true);
    //Set the loading image
    document.getElementById("load").innerHTML = '<img src="Images/ajax-loader.gif" border="0" alt="Loading, please wait..." />';
    xmlhttp.onreadystatechange=function()
    {   
        if (xmlhttp.readyState==4)
        {
            //Remove the loading image
            document.getElementById("load").innerHTML = '';

            var zipstring = xmlhttp.responseText;
            if (zipstring!="Error")
            {
                var ziparray = zipstring.split("|");
                document.getElementById("gemeente").value = ziparray[1];
                document.getElementById("provincie").value = ziparray[2];
            }
            else
            {
                //Provide an error message
            }
        }
    }
    xmlhttp.send(null);
}

ok, thanks. it works