jQuery 的 ready()的純js替代方法

更新時(shí)間：2016年11月20日 15:50:31 投稿：hebedich

這篇文章主要介紹了jQuery 的 ready()的純js替代方法的相關(guān)資料,需要的朋友可以參考下

ready 方法是 jQuery 實(shí)現(xiàn)的在 html 頁面在 DOM(Document Object Model, 文檔對(duì)象模型) 樹完全加載完成后觸發(fā)的一個(gè)方法. 因?yàn)樗邮盏姆椒ㄔ陧撁嬷兴械?DOM 都可訪問時(shí)才執(zhí)行, 所以此時(shí)你完全可以訪問和操作 html 中的元素.

在 jQuery 3.0 之前, 典型的匿名函數(shù)方式的用法如下:

$(document).ready(function() {
 // 在 .ready() 被觸發(fā)時(shí)執(zhí)行.
});

在 jQuery 3.0 中 ready() 的變化

在 jQuery 3.0 發(fā)布之前, 有以下幾種 ready 方法的使用方式:

在 document 對(duì)象上: $(document).ready(handler);

在一個(gè)空元素上: $().ready(handler);

或直接使用 (即: 不在一個(gè)指定的元素上): $(handler);

以上的幾種方式是等價(jià)的. 傳入的 handler 會(huì)在頁面所有的 DOM 都加載完成后執(zhí)行, 不管它被哪個(gè)指定元素執(zhí)行. 也就是, 在 image 元素 $("img") 與 document 對(duì)象上調(diào)用 ready 方法不表明要等待這些元素加載完成后就觸發(fā) handler, 而是在整個(gè) DOM 樹加載完成后才觸發(fā).

在 jQuery 3.0 中, 除了 $(handler); 方法其它的都被棄用了. 官方的理由是:

因?yàn)檫@個(gè)選擇與 .ready() 方法的行為沒有關(guān)系, 它是低效的并且會(huì)誤導(dǎo)用戶猜測這個(gè)方法的行為.

Ready 和 Load 事件的不同點(diǎn)

ready 事件在頁面 DOM 完全加載后觸發(fā)并能正確的訪問到元素. 而 load 事件在頁面 DOM 及資源文件(圖片,視頻等)都加載完成后才觸發(fā).

load 事件可以像下面這樣使用:

$(window).on("load", function(){
 // 當(dāng)頁面所有資源(圖片,視頻等)全加載完成后才加載執(zhí)行
});

這會(huì)等待 DOM 加載完成以及圖片加載完成(根據(jù)圖片的大小, 需要加載一定的時(shí)間).

對(duì)于常規(guī)的 DOM 操作你多半不需要 load 事件, 但如果你想做一個(gè)等待頁面所有資源加載的一個(gè)加載效果或者是計(jì)算圖片的大小時(shí)這應(yīng)該是一個(gè)不錯(cuò)的選擇.

你可能并不需要 jQuery.ready()

ready 方法確保了其內(nèi)部的代碼都能正確的操作 DOM 元素. 這是什么意思? 當(dāng)你把 JavaScript 代碼放到 HTML 文檔中時(shí)它會(huì)確?；卣{(diào)函數(shù)里面的代碼在瀏覽器在已經(jīng)加載頁面中所有的元素時(shí)執(zhí)行:

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>.ready() 教程</title>
  <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
  <script>
   $(function(){ // .ready() 的回調(diào)方法, 在 DOM 完全加載完后執(zhí)行
    var length = $("p").length;
    // 下面會(huì)在console控制臺(tái)中輸出 1, 表示有段落 p 存在.
    // 這就證明了這個(gè)回調(diào)方法在 DOM 完全加載完后執(zhí)行.
    console.log(length);
   });
  </script>
 </head>
 <body>
  <p>I'm the content of this website</p>
 </body>
</html>

如果你把要執(zhí)行的 JavaScript 放到 body 元素里面的最后位置, 你就不需要用 ready() 方法把代碼包裹在里面了, 因?yàn)樵?JavaScript 代碼執(zhí)行時(shí)頁面中所有的元素都已經(jīng)加載完成, 所以此時(shí)你就可以訪問或操作元素了:

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>.ready() 教程</title>
 </head>
 <body>
  <p>I'm the content of this website</p>
  <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
  <script>
   var length = $("p").length;
   // 下面會(huì)在console控制臺(tái)中輸出 1, 表示有段落 p 存在.
   console.log(length);
  </script>
 </body>
</html>

使用原生 JavaScript 替換 ready()
對(duì)于現(xiàn)代瀏覽器, 以及 IE9+, 你可以監(jiān)聽 DOMContentLoaded 事件:

document.addEventListener("DOMContentLoaded", function(){
 // 在 DOM 完全加載完后執(zhí)行
});

在這里要記住當(dāng)事件已經(jīng)觸發(fā)后回調(diào)方法不會(huì)執(zhí)行(頁面觸發(fā)事件后才添加的這個(gè)事件監(jiān)聽). 為了確?；卣{(diào)函數(shù)始終能執(zhí)行, jQuery 檢測了document 的 readyState 屬性(參考), 如果檢測出的屬性值是 complete 就立即執(zhí)行回調(diào)函數(shù):

var callback = function(){
 // 在 DOM 完全加載完后執(zhí)行
};

if (
  document.readyState === "complete" ||
  (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
 callback();
} else {
 document.addEventListener("DOMContentLoaded", callback);
}

你應(yīng)該始終記得引入 domReady 庫, 它已經(jīng)實(shí)現(xiàn)了這個(gè)解決方案.

老版本的 IE

對(duì)于 IE8 及以下版本, 你可以使用 onreadystatechange 事件來檢測 document 的 readyState 屬性:

document.attachEvent("onreadystatechange", function(){
 // 檢測 DOM 是否加載完全
 if(document.readyState === "complete"){
  // 為了確保在之后不會(huì)再觸發(fā) 移除事件監(jiān)聽
  document.detachEvent("onreadystatechange", arguments.callee);
  // 實(shí)際處理程序...
 }
});

另外你可以使用 load 事件, 像 jQuery 那樣, 這樣就可以在所有的瀏覽器中正確的執(zhí)行了. 這也導(dǎo)致有一定的時(shí)間延遲, 因?yàn)樗鼤?huì)等所有的資源都加載完成. 記住在這個(gè)解決方案中你還是得去檢測 readyState, 如上所述, 這是為了確保當(dāng)事件已經(jīng)觸發(fā)后也能執(zhí)行回調(diào)函數(shù).

結(jié)論

如果你正在尋找一個(gè)原生 JavaScript 來代替 ready 方法你可以通過 DOMContentLoaded 事件來解決. 如果你的系統(tǒng)需要支持 IE 那么你就要確保 DOM 已經(jīng)加載完全!

您可能感興趣的文章: