【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和圖片載入完畢，就可以執行一些方法，不過有些時候，必須要等所有的元素都載入完畢，才可以執行一些方法的時候，比如說，部分圖片或者什麼其他方面還沒有載入好，這個時候，點擊某些按鈕，會導致出現意外的情況，這個時候，就需要用到:

$(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:路漫漫其修遠兮，吾將上下而求索。