cali_dotcom Posted July 18, 2010 Share Posted July 18, 2010 Hi all, i need a little help with some code that should display a gif image while a page loads. i have a php page with a link that users can click and it should load a page via ajax as an overlay over the current page. the problem is that the loading page makes some requests to some customers' systems and some of them could be really slow taking sometimes 8-10 secs to load. during that time, the overlay pops up and just displays a blank page. i have some code that should display a gif image with a loading message, the problem is that the blank page(of the overlay) loads over it. question: is there any way to prevent the from displaying until all the contents have loaded then display the page at once? the html code i use for this is below(its triggered by an onclick event). does anyone have a way i can do this? right now, the gif loads on the calling although it should load over it. i use the same code on the overlay when any further requests are made and it loads over it. does anyone see why it does not load over the calling page? <html> <head> <script> showProcess('Loading Family Pricing Parts'); function showProcess(textMessage){ //if (document.getElementById("showProcessDIV")){ if(document.getElementById("showProcessDIV").style.display=="none"){ document.getElementById("showProcessDIV").style.display="block"; document.getElementById("ProcessMessage").innerHTML=textMessage; } //} } function hideProcess(){ //if(document.getElementById().style.display=="block"){ document.getElementById("ProcessMessage").innerHTML=""; document.getElementById("showProcessDIV").style.display="none"; //} } </script> </head> <body > <div id="showProcessDIV" style="display:none"> <div id="showProcessAlpha"></div> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="showProcessTABLE"> <tr> <td align="center" valign="middle"> <table border="0" cellspacing="0" cellpadding="20" class="ProcessTable"> <tr> <td class="Process" nowrap="nowrap" id="ProcessMessage">Adding Parts... Please wait...</td> <tr> </tr> <td valign="top" align="center" height="60"><img src="images/ajax-loader2.gif" width="32" height="32" align="top" /><br /></td> </tr> </table> </td> </tr> </table> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
radar Posted July 20, 2010 Share Posted July 20, 2010 this is my code for doing just that.. function AjaxObjectCreateGeneral() { var req; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari req = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ req = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ req = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } return req; } function changeNavigation(url) { req=AjaxObjectCreateGeneral(); if(req) { var myRand = parseInt(Math.random()*99999999); var url = url; var srcs = url+"&ints="+myRand; $('TransMsgDisplay').innerHTML='<img src="../templates/admin/img/indicator.gif" align="center">'; req.onreadystatechange = processNavigation; req.open("GET",srcs,true); req.send(); } } function processNavigation() { if(req.readyState == 4) { if(req.status == 200) { if(req.responseText == 0) { document.location.href="index.php"; } else { document.getElementById("TransMsgDisplay").innerHTML=req.responseText; } } } } that should get you on your way to getting what you need done Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.