【JS】怎樣用原生JS實現jQuery的ready方法

Jquery中$(document).ready()的作用類似於傳統JavaScript中的window.onload方法，只是與window.onload方法還是有差別的。

總的來說，window.onload()方法是必須等到頁面內包含圖片的全部元素載入完成后才干運行。

$(document).ready()是DOM結構繪制完成后就運行，不必等到載入完成。

 

詳細一些。能夠從下面幾方面對照它們的差別：

1.運行時間

window.onload必須等到頁面內包含圖片的全部元素載入完成后才干運行。 $(document).ready()是DOM結構繪制完成后就運行，不必等到載入完成。

 

2.編寫個數不同

window.onload不能同一時候編寫多個，假設有多個window.onload方法，僅僅會運行一個。

$(document).ready()能夠同一時候編寫多個。而且都能夠得到運行。

 

3.簡化寫法

window.onload沒有簡化寫法。

$(document).ready(function(){})能夠簡寫成$(function(){});

在一些開發中。一般用到javascript。我是採用jquery的模式，也就是大多數時候，第一行寫的是：

$(document).ready(function(){

...

});

這個時候，不一定要等全部的js和圖片載入完成。就能夠運行一些方法。只是有些時候，必需要等全部的元素都載入完成。才干夠運行一些方法的時候，比方說，部分圖片或者什么其它方面還沒有載入好，這個時候，點擊某些button，會導致出現意外的情況，這個時候，就需要用到:

$(window).load(function() {
$("#btn-upload").click(function(){   //比方說：
      uploadPhotos();
});
});

以瀏覽器裝載文檔為例，在頁面載入完成后。瀏覽器會通過 Javascript 為 DOM 元素加入事件。在常規的 Javascript 代碼中，通常使用 window.onload 方法，而在 Jquery 中，使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模塊中最重要一個函數，能夠極大的提高 Web 應用程序的速度。

另外，須要注意一點，因為在 $(document).ready() 方法內注冊的事件，僅僅要 DOM 就緒就會被運行，因此可能此時元素的關聯文件未下載完。

比如與圖片有關的 html 完成下載，而且已經解析為 DOM 樹了。但非常有可能圖片還沒有載入完成，所以比如圖片的高度和寬度這種屬性此時不一定有效。要解決問題，能夠使用 Jquery 中還有一個關於頁面載入的方法 ---load() 方法。 Load() 方法會在元素的 onload 事件中綁定一個處理函數。假設處理函數綁定給 window 對象。則會在全部內容 ( 包含窗體、框架、對象和圖像等 ) 載入完成后觸發。假設處理函數綁定在元素上，則會在元素的內容載入完成后觸發。

Jquery代碼例如以下：

$(window).load(function (){
       // 編寫代碼 
});
等價於 JavaScript 中的下面代碼
Window.onload = function (){
     // 編寫代碼
}

那么，對於某些特殊需求，不希望使用jQuery。但又想實現jQuery的ready方法。

該怎樣用原生JS實現jQuery的ready方法呢？以下是當中之中的一個的做法：

function ready(fn){
	if(document.addEventListener){		//標准瀏覽器
		document.addEventListener('DOMContentLoaded',function(){
			//注銷時間，避免重復觸發
			document.removeEventListener('DOMContentLoaded',arguments.callee,false);
			fn();		//運行函數
		},false);
	}else if(document.attachEvent){		//IE瀏覽器
		document.attachEvent('onreadystatechange',function(){
			if(document.readyState=='complete'){
				document.detachEvent('onreadystatechange',arguments.callee);
				fn();		//函數運行
			}
		});
	}
}

Author:致知

Sign:路漫漫其修遠兮，吾將上下而求索。