changing visibility using javascript

Question

hi i have web page which uses ajax to retrieving data from another pages and while doing that i want to show a loading gif in the page so i've create a div with my gif on it.

 <div id="loading"><img src="images/loadinfo.net.gif" width="48" height="48" /></div> 

here is my css code :

#content #loading {     visibility:hidden;     position: fixed;     width: 48px;     top: 0px; } 

now i figured all i need to do is to set the visibility of loading div to 'visible' at the beginning of my loading content ajax function and then at the end make it hidden again but its not working weird thing is if i create loading div visible and then turn it hidden at the beginning of ajax function it works fine !!!

here is my function :

function ajaxpage(url, containerid) {     document.getElementById('loading').style.visibility = 'visible';      var bustcachevar = 1 //bust potential caching of external pages after initial request? (1=yes, 0=no)     var loadedobjects = ""     var rootdomain = "http://" + window.location.hostname     var bustcacheparameter = ""      var page_request = false     if (window.XMLHttpRequest) // if Mozilla, Safari etc     page_request = new XMLHttpRequest()     else if (window.ActiveXObject) { // if IE         try {             page_request = new ActiveXObject("Msxml2.XMLHTTP")         } catch (e) {             try {                 page_request = new ActiveXObject("Microsoft.XMLHTTP")             } catch (e) {}         }     } else     return false     page_request.onreadystatechange = function () {         loadpage(page_request, containerid)     }     if (bustcachevar) //if bust caching of external page     bustcacheparameter = (url.indexOf("?") != -1) ? "&" + new Date().getTime() : "?" + new Date().getTime()     page_request.open('GET', url + bustcacheparameter, true)     page_request.send(null) }  function loadpage(page_request, containerid) {     if (page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1)) document.getElementById(containerid).innerHTML = page_request.responseText  }  function loadobjs() {     if (!document.getElementById) return     for (i = 0; i < arguments.length; i++) {         var file = arguments[i]         var fileref = ""         if (loadedobjects.indexOf(file) == -1) { //Check to see if this object has not already been added to page before proceeding             if (file.indexOf(".js") != -1) { //If object is a js file                 fileref = document.createElement('script')                 fileref.setAttribute("type", "text/javascript");                 fileref.setAttribute("src", file);             } else if (file.indexOf(".css") != -1) { //If object is a css file                 fileref = document.createElement("link")                 fileref.setAttribute("rel", "stylesheet");                 fileref.setAttribute("type", "text/css");                 fileref.setAttribute("href", file);             }         }         if (fileref != "") {             document.getElementsByTagName("head").item(0).appendChild(fileref)             loadedobjects += file + " " //Remember this object as being already added to page         }     }     document.getElementById('loading').style.visibility = 'hidden'; } 

Answer 1

function loadpage (page_request, containerid) {   var loading = document.getElementById ( "loading" ) ;    // when connecting to server   if ( page_request.readyState == 1 )       loading.style.visibility = "visible" ;    // when loaded successfully   if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))   {       document.getElementById(containerid).innerHTML=page_request.responseText ;       loading.style.visibility = "hidden" ;   } }