[SOLVED] Adding loading image

[Woodburn2006]

i have an image ready to use as a loading image for when images are loading after an ajax request but as i am very new to javascript and ajax all of the examples i have read seem weird because they are all coded slightly differently.

 

here is the code in my JS file:

var xmlHttp

function showPhoto(str)
{

if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }

   xmlHttp = createXmlHttp()

   if (xmlHttp == null)
   {
      alert("Browser does not support HTTP Request");
      return;
   } 

   var url = "http://travelling.dw20.co.uk/AJAX/largephoto.php";
   url += "?id=" + str;
   url += "&sid=" + Math.random();
   xmlHttp.onreadystatechange = stateChanged;
   xmlHttp.open("GET", url, true)
   xmlHttp.send(null)
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
} 

}

function createXmlHttp()
{
var xmlHttp;

try
{
	//try the hard way because IE7 doesn't implement XMLHttpRequest() properly
	var xmlVersions = new Array('MSXML2.XMLHTTP.6.0',
                                                      'MSXML2.XMLHTTP.5.0',
                                                      'MSXML2.XMLHTTP.4.0',
                                                      'MSXML2.XMLHTTP.3.0',
                                                      'MSXML2.XMLHTTP',
                                                      'Microsoft.XMLHTTP');

	//iterate through the array until we get one that works
	for(var i = 0; i < xmlVersions.length && !xmlHttp; i++)
	{
		xmlHttp = new ActiveXObject(xmlVersions[i]);
	}
}
catch(e)
{
	//try the easy way for the good browsers
	xmlHttp = new XMLHttpRequest();
}

//return object (if we have one) or null
return xmlHttp;
}

 

could anybody please advise me on how i would go about adding a loading image into this script?

 

thanks alot in advance

 

[KevinM1]

I think this would be pretty easy to do.  In essence, you'll need to check the readyState of the XmlHttp object.  Since a readyState of 1 means the server is loading the response, it makes sense to test against that.  You can add it to your existing stateChanged function.

 

function stateChanged() 
{
   if(xmlHttp.readyState == 1 || xmlHttp.readyState == "loading")
   {
      //display loading image
   }

   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   { 
       document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
   } 
}

[Woodburn2006]

sorted, thanks alot, i just used this:

 

function stateChanged() 
{
   if(xmlHttp.readyState == 1 || xmlHttp.readyState == "loading")
   {
       document.getElementById("txtHint").innerHTML="<img src='/images/ajax-loader.gif' border='0' alt='running' />";
   }

   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   { 
       document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
   } 
}

 

cheers for that