旋轉等待內容載入完畢實現程式碼例項

admin發表於2017-02-10

在很多人性化較好的網站，在載入較為耗時的內容的時候，通常會採用非同步載入，需要消耗較長時間的內容會被一個提示型別的內容所替代，比如一個旋轉的圖示，用於提示使用者，內容在載入之中，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET", "demo/ajax/net/Async.aspx", true);
  xmlhttp.send();
}
window.onload = function () {
  loadXMLDoc();
  var odiv = document.getElementById("content");
  odiv.innerHTML = "由於是非同步操作，所以不會阻塞當前內容的顯示。";
}
</script> 
</head> 
<body> 
<div id="show"><img src="demo/ajax/net/img/wait.gif"></div> 
<div id="content"></div>
</body> 
</html>

上面的程式碼實現了我們的要求，在載入內容的時候，要現實內容的區域暫時使用能夠一個旋轉圖片替代，下面介紹一下它的實現過程:

實現原理:

在上面的程式碼中由於open()方法的第三個引數是true，這說明是採用非同步請求的方式，也就是說，當在後臺進行處理相關操作的時候並不影響後面內容的顯示，否則第二個div中的內容會在第一個div中的內容載入完畢後再顯示。在內容載入完成之前，在第一個div中會顯示一個旋轉等待的圖片，當ajax請求完畢的時候，在用指定內容替代圖片。

相關文章