在jQuery 3.0的版本前, ready經典用法是用一個匿名函數,像這樣:
$(document).ready(function() { // Handler for .ready() called. });
jQuery 3.0 ready() 變化
jQuery 3.0 ready() 變化
jQuery 3.0 ready() 變化jQuery 3.00yQueryd ready方法:
在document元素上操作: $(document).ready(handler);
在空元素上操作: $().ready(handler);
)操作: $(handler);
上述所有命名的變種在功能上是等價的。無論是哪個元素,在DOM載入完畢之後其指定的處理程序都會被呼叫。換句話說,這裡的DOM載入完畢並不表示在文件中的某個具體的元素,例如img元素,載入完畢。相反,這裡表示的是整個DOM樹載入完畢。
在jQuery 3.0中,除了$(handler) 其他的ready方法都被棄用。
當DOM載入完成且元素能夠被安全存取時就會觸發ready事件。另一方面,load事件卻在DOM和所有資源載入後觸發。
可以像下面這樣使用load事件:
$(window).on("load", function(){ // Handler when all assets (including images) are loaded });
ready 方法可以確保程式碼只在所有DOM元素能被安全操縱時才執行。 但這意味著什麼呢?這表示當你要執行的js程式碼嵌在HTML中某個片段中時,瀏覽器也要載入完以下元素才能執行。
就像下面這個例子一樣:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>.ready() tutorial</title> <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> <script> $(function(){ // .ready() callback, is only executed when the DOM is fully loaded var length = $("p").length; // The following will log 1 to the console, as the paragraph exists. // This is the evidence that this method is only called when the // DOM is fully loaded console.log(length); }); </script> </head> <body> <p>I'm the content of this website</p> </body> </html>
如果你要執行的javascript程式碼放在body末尾,你可能不需要使用ready()方法,因為瀏覽器解析到javascript時你可能試圖操縱而存取的DOM元素已經載入完了:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>.ready() tutorial</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; // The following will log 1 to the console, as the paragraph exists. console.log(length); </script> </body> </html>
對於現代瀏覽器以及IE9+,你可以透過監聽DOMContentLoaded 事件內容的內容?
但是,請注意,如果事件已經發射,回呼將不會被執行。為了確保回呼總是運行,jQuery檢查文檔reference)的「readyState」屬性,如果屬性值變為 complete,則立即執行回呼函數:
document.addEventListener("DOMContentLoaded", function(){ // Handler when the DOM is fully loaded });
包括domReady庫,已經實現了這個解決方案。
舊版的IE瀏覽器
對於IE8及以下的瀏覽器,你能使用onreadystatechange 事件去監聽文件的readyState 屬性:
var callback = function(){ // Handler when the DOM is fully loaded }; if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll) ) { callback(); } else { document.addEventListener("DOMContentLoaded", callback); }
任何瀏覽器上運行。這也會導致一個時間延遲,因為它會等待所有的資產被載入。