使用javascript改變能見度

嗨我有網頁，它使用Ajax從其他頁面檢索數據，同時這樣做我想在頁面中顯示加載gif，所以我創建了一個div與我的gif。使用javascript改變能見度

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

這裏是我的CSS代碼：

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

現在我想通一切，我需要做的是設置爲我的加載內容AJAX功能的開始裝載div來「看得見」的知名度和然後在最後使其隱藏但它不工作奇怪的事情是如果我創建加載div可見，然後把它隱藏在ajax函數的開始，它工作正常！

這裏是我的功能：

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

來源

2011-06-01 max

藏在div下次請縮進您的代碼。 – 2011-06-01 17:27:33

你在評論中提到了「加載頁面」。據推測，你的ajax正在返回一些加載到「當前」頁面的片段，是的？什麼是加載？那麼loadobjs（）如何被使用？你已經包含了它，但它並沒有在你的代碼中被調用。我在快速測試中使用了您提供的代碼，並按預期工作。你能把我們指向一個活頁面嗎？ – squidbe 2011-06-01 21:51:14

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

來源

2011-06-01 17:32:58 atlavis

使用顯示器，而不是知名度。顯示：不可見不可見，不可見。

來源

2011-06-01 17:25:30 mikey

這工作，但只是一個頁面wehen我點擊鏈接，在加載頁面我得到:: 消息：所需的對象行：22 字符：1 代碼：0 和這條線是：文件。 getElementById（'loading'）。style.display ='block'; – max 2011-06-01 18:27:52

對我來說，它找不到任何具有「加載」標識的元素，您可以通過將行分成兩行來測試它：var loading = document.getElementById（「loading」）; loading.style.display ='';我不使用'塊'我只使用'無'或''。我認爲默認是'內聯'，但我只是把它留給未指定不知道爲什麼每個人都非常喜歡'阻止';） – mikey 2011-06-01 19:43:46

另外，我不清楚，max，你是什麼意思的一頁和加載頁面？ – mikey 2011-06-01 19:46:34

如果你只是想，當你得到迴應添加到您的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'; 
}

顯示它，但是這完全取決於你如何在第一時間

來源

2011-06-01 17:27:30 Ibu

沒有我想顯示它，而數據正在從另一個頁面檢索 – max 2011-06-01 18:34:37

哦，然後，在請求之前更改容器樣式 – Ibu 2011-06-01 18:39:35

display ='block'; 工程，但只爲一頁，當我點擊加載頁面中的鏈接我得到::消息：所需的對象行：22個字符：1代碼：0，這行是：document.getElementById（'加載'）。 display ='block'; ... – max 2011-06-01 18:52:02

使用javascript改變能見度

回答

相關問題