window.onload事件觸發的時候頁面並沒有被瀏覽器渲染

admin發表於2017-03-31
事件瀏覽器

關於window.onload事件的用法這裡就不多介紹了，具體可以參閱window.onload用法詳解一章節。

本章節要介紹一個事實，那就是當window.onload事件觸發的時候，頁面並沒有被瀏覽器所渲染。

具體的遠離這裡不做介紹，下面就通過一段程式碼例項對此做一下證明。

程式碼如下:

[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.open("GET", "demo/ajax/net/Async.aspx", false);
  xmlhttp.send();
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById("show").innerHTML = xmlhttp.responseText;
  }
}
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>

下面是asp.net後臺處理程式碼:

[C#] 純文字檢視 複製程式碼
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace ajax
{
    public partial class Async : System.Web.UI.Page
    {
        string webName;
        int age;
        int i = 0;
        protected void Page_Load(object sender, EventArgs e)
        {
            while(i<1000000000){
                i++;
            }
            webName = Server.UrlDecode(Request.QueryString["webName"]);
            age = Convert.ToInt32(Request.QueryString["age"]);
            Response.Write("歡迎來到螞蟻部落，本站已經成立3週年。");
        }
    }
}

從上面的程式碼可以看出，ajax要響應後臺的處理，需要等待一段時間，並且ajax才用的同步處理，所以顯示"歡迎來到螞蟻部落，本站已經成立3週年。"需要等待一段時間，並且loadXMLDoc()函式是放在window.onload事件處理函式中，這個時候第一個div中的圖片並沒有被顯示，這說明瀏覽器還沒有開始渲染頁面，也就是說當window.onload事件觸發的時候，瀏覽器還沒有渲染頁面。

相關文章