js中window.onload 與 jquery中$(document.ready()) 測試

時間 2019-11-25

標籤 window.onload window onload jquery document.ready document ready 欄目 JavaScript 简体版

原文原文鏈接

js中window.onload 與 jquery中$(document.ready())差異，驗證代碼例如如下(調換js代碼和Jquer代碼書寫順序測試。執行結果同樣。所以與代碼書寫位置不要緊)：

<html>
<head>
<script type='text/javascript' src='jquery-1.11.1.min.js'></script>
<script type='text/javascript'>
    $(document).ready(function(){
		var myDate = new Date();
		var hours=myDate.getHours();       //獲取當前小時數(0-23)
		var minutes=myDate.getMinutes();     //獲取當前分鐘數(0-59)
		var seconds=myDate.getSeconds();     //獲取當前秒數(0-59)
		var milliseconds=myDate.getMilliseconds();    //獲取當前毫秒數(0-999)
		
		console.log("【$(document).ready()】當前時間："+hours+"時"+minutes+"分"+seconds+"秒"+milliseconds+"毫秒");
		console.log("【$(document).ready()】先載入DOM結構,再運行當前JS,後載入大型圖片及內容");
    });
  
   //***************
   window.onload=function(){ 
	    var myDate = new Date();
		var hours=myDate.getHours();       //獲取當前小時數(0-23)
		var minutes=myDate.getMinutes();     //獲取當前分鐘數(0-59)
		var seconds=myDate.getSeconds();     //獲取當前秒數(0-59)
		var milliseconds=myDate.getMilliseconds();    //獲取當前毫秒數(0-999)
	
		console.log("【window.onload】當前時間："+hours+"時"+minutes+"分"+seconds+"秒"+milliseconds+"毫秒");
	    console.log("【window.onload】先載入DOM結構,後載入大型圖片及內容,再運行當前JS");
	}
   //***************
</script>
</head>
<body>
	<pre>
		說明：$(document).ready()是在DOM結構載入完後運行的，而window.onload是得在所有文件都載入完後運行的；
		注意差異，一個是DOM載入完。一個是所有文件載入完。

		所謂DOM載入完。就是指DOM模型載入完。也就是指代碼載入完。
		二者最大的差異。就是DOM載入完以後。沒必要再去等對應的圖片載入完就可以運行JS代碼了。

	</pre>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	<img src='img.jpg'/><img src='img1.jpg'/><img src='img2.jpg'/><img src='img3.jpg'/><img src='img4.jpg'/>
	</body>
</html>javascript

執行截圖：
html