Woodburn2006 Posted September 17, 2008 Share Posted September 17, 2008 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 https://forums.phpfreaks.com/topic/124643-solved-adding-loading-image/ Share on other sites More sharing options...
KevinM1 Posted September 17, 2008 Share Posted September 17, 2008 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 https://forums.phpfreaks.com/topic/124643-solved-adding-loading-image/#findComment-643744 Share on other sites More sharing options...
Woodburn2006 Posted September 17, 2008 Author Share Posted September 17, 2008 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 https://forums.phpfreaks.com/topic/124643-solved-adding-loading-image/#findComment-643769 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.