首頁  >  文章  >  php教程  >  jQuery 的 ready()的純js替代方法

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

高洛峰
高洛峰原創
2016-12-06 13:48:551357瀏覽

ready 方法是jQuery 實現的在html 頁面在DOM(Document Object Model, 文件物件模型) 樹完全載入完成後觸發的一個方法. 因為它接收的方法在頁面中所有的DOM 都可訪問時才執行, 所以此時你完全可以存取和操作html 中的元素.

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

$(document).ready(function() {
 // 在 .ready() 被触发时执行.
});

   

在j 3.0 發佈前, 有以下幾種ready 方法的使用方式:

在document 物件上: $(document).ready(handler);

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

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

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

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

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

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

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


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

以上的幾種方式是等價的. 傳入的handler 會在頁面所有的DOM 都加載完成後執行, 不管它被哪個指定元素執行. 也就是, 在image 元素$("img") 與document 物件上呼叫ready 方法不表示要等待這些元素載入完成後就觸發handler, 而是在整個DOM 樹載入完成後才觸發.

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

因為這個選擇與.ready() 方法的行為沒有關係, 它是低效的並且會誤導使用者猜測這個方法的行為.

Ready 和Load 事件的不同點

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

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

$(window).on("load", function(){
 // 当页面所有资源(图片,视频等)全加载完成后才加载执行
});

   

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

對於常規的DOM 操作你多半不需要load 事件, 但如果你想做一個等待頁面所有資源加載的一個加載效果或者是計算圖片的大小時這應該是一個不錯的選擇.

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

ready 方法確保了其內部的程式碼都能正確的操作DOM 元素. 這是什麼意思? 當你把JavaScript 程式碼放到HTML 文件中時它會確保回調函數裡面的程式碼在瀏覽器在已經載入頁面中所有的元素時執行:

<!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() 的回调方法, 在 DOM 完全加载完后执行
    var length = $("p").length;
    // 下面会在console控制台中输出 1, 表示有段落 p 存在.
    // 这就证明了这个回调方法在 DOM 完全加载完后执行.
    console.log(length);
   });
  </script>
 </head>
 <body>
  <p>I&#39;m the content of this website</p>
 </body>
</html>

   

如果你把要執行的JavaScript 放到body 元素裡面的最後位置, 你就不需要用ready() 方法把程式碼包裹在裡面了,因為在JavaScript 程式碼執行時頁面中所有的元素都已經載入完成, 所以此時你就可以存取或操作元素了:

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

   

使用原生JavaScript 替換ready()

對於現代瀏覽器, 以及IE9+ , 你可以監聽DOMContentLoaded 事件:

document.addEventListener("DOMContentLoaded", function(){
 // 在 DOM 完全加载完后执行
});

   

在這裡要記住當事件已經觸發後回調方法不會執行(頁面觸發事件後才添加的這個事件監聽). 為了確保回調函數始終能執行, jQuery 偵測了document 的readyState 屬性(參考), 如果偵測出的屬性值是complete 就立即執行回呼函數:

var callback = function(){
 // 在 DOM 完全加载完后执行
};
 
if (
  document.readyState === "complete" ||
  (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
 callback();
} else {
 document.addEventListener("DOMContentLoaded", callback);
}

   

你應該永遠記得引入這個解決方案舊版的IE

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

document.attachEvent("onreadystatechange", function(){
 // 检测 DOM 是否加载完全
 if(document.readyState === "complete"){
  // 为了确保在之后不会再触发 移除事件监听
  document.detachEvent("onreadystatechange", arguments.callee);
  // 实际处理程序...
 }
})

;


   🎜所有的瀏覽器中正確的執行了. 這也導致有一定的時間延遲, 因為它會等所有的資源都加載完成. 記住在這個解決方案中你還是得去檢測readyState, 如上所述, 這是為了確保當事件已經觸發後也能執行回呼函數.🎜🎜🎜🎜
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn