Jump to content

[SOLVED] Adding loading image


Woodburn2006

Recommended Posts

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

 

Link to comment
Share on other sites

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 
   } 
}

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.