使用javascript更改可见性 [英] changing visibility using javascript

问题描述

hi
i有网页，它使用ajax从其他页面检索数据，而在这样做，我想显示一个加载gif的页面，所以我已经创建了一个div与我的gif。 >

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>

这里是我的css代码：

here is my css code :

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

现在我想我所有我需要做的是设置可见性加载div到'可见'在我的加载内容ajax函数的开头，然后在最后使它再次隐藏
，但它不工作的奇怪的事情是如果我创建加载div可见，然后将其隐藏在ajax函数的开始它工作正常!!!

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

这里是我的功能：

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

推荐答案

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

这篇关于使用javascript更改可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！