$(document).ready()與 window.onload執行時機

時間 2019-11-10

標籤 document ready window.onload window onload 執行時機欄目 JavaScript 简体版

原文原文鏈接

　　$(document).ready()方法和window.onload方法有類似的功能，可是在執行時機方面是有區別的。window.onload方法是子啊網頁中的全部元素（包括元素的全部關聯的文件）徹底加載到瀏覽器後才執行，即javascript此能夠訪問網頁中的任何元素。而經過jquery中的$(document).ready()方法註冊的時間處理程序，在DOM徹底就緒時就能夠被調用。此時，網頁的全部元素對jquery而言都是能夠訪問的，可是，這並不意味着這些元素關聯的文件都已經下載完畢。javascript

　　舉一個例子，有一個大型的圖庫網站，爲網頁中的全部圖片添加某些行爲，例如單機圖片後讓他隱藏或顯示。若是使用window.onload方法來處理，那麼用戶必須等到每一副圖片都加載完畢後，才能夠進行操做。若是使用jquery中的$(document).ready()方法來進行設置，只要DOM就緒就能夠操做了，不須要等待全部圖片加載完畢。顯然，吧網頁解析爲DOM樹的速度比吧網頁中的全部關聯文件加載完畢的素的快不少。html

　　另外，須要注意一點，因爲在$(document).ready()方法內註冊的事件，只要DOM就緒就會被執行，所以可能此時元素的關聯文件未下載完。例如與圖片有關的HTML下載完畢，而且已經即誒下爲DOM樹了，但頗有可能圖片還未加載完畢，全部例如圖片的高度和寬度這樣的屬性此時比必定有效。要解決這個問題，可使用Jquery中另外一個關於頁面加載的方法-----load（）方法。load（）方法會在元素的onload事件中綁定一個處理函數。若是處理函數綁定給window對象，則會在全部內容（包括窗口。框架，對象和圖像等）加載完畢後觸發，若是處理函數綁定在元素上，則會在元素的被容加載完畢後加載。jquery代碼以下：java

$(window).load(function(){
//代碼

});

　　等價於javascript中的如下代碼：jquery

window.onload=function(){
    
//代碼
}

例如1：時間加載對比：瀏覽器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
   var startTime = new Date().getTime();
   $(document).ready(function(){
		test1();
  })
	
  function test1(){
      var endTime2  = new Date().getTime(); 
	  var a = endTime2 - startTime;
	  $("<div>jQuery的ready() : "+a+" ms</div>").appendTo("body");
  }

  function test2(){
       var endTime1  = new Date().getTime();
	   var b = endTime1 - startTime;
	   $("<p>JavaScript的window.onload : "+b+" ms</p>").appendTo("body");
  }
</script>
</head>
<body  onload="test2();">
	<img src="demo.jpg" style="width:200px;height:200px;"/>
</body>
</html>

window.onloadapp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
 function one(){
   alert("one");
 }
 function two(){
   alert("two");
 } 
 window.onload = one ;
 window.onload = two ;
</script>
</head>
<body>

</body>
</html>

document.ready框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
  function one(){
   alert("one");
 }
 function two(){
   alert("two");
 } 
  $(document).ready(function(){
      one();
  })
  $(document).ready(function(){
      two();
  })
</script>

</head>
<body>

</body>
</html>

出處：鋒利的jquery第二版 P99函數

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。