使用 javascript 更改可见性

changing visibility using javascript

提问by max

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.

嗨，我有一个网页，它使用 ajax 从另一个页面检索数据，同时我想在页面中显示一个正在加载的 gif，所以我创建了一个带有 gif 的 div。

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

here is my css code :

这是我的 css 代码：

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

现在我想我需要做的就是在加载内容的 ajax 函数开始时将加载 div 的可见性设置为“可见”，然后在最后将其再次隐藏，但它不起作用奇怪的是，如果我创建加载 div可见，然后将其隐藏在 ajax 函数的开头，它工作正常！！！

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

回答by atlavis

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

回答by Ibu

If you just want to display it when you get a response add this to your loadpage()

如果您只想在收到响应时显示它，请将其添加到您的 loadpage()

function loadpage(page_request, containerid){
   if (page_request.readyState == 4 && page_request.status==200) { 
      var container = document.getElementById(containerid);
      container.innerHTML=page_request.responseText;
      container.style.visibility = 'visible';
      // or 
      container.style.display = 'block';
}

but this depend entirely on how you hid the div in the first place

但这完全取决于您首先如何隐藏 div

回答by mikey

Use display instead of visibility. display: none for invisible and no setting for visible.

使用显示而不是可见性。display: none 表示不可见，不设置可见。