在jQuery 3.0的版本前, ready經(jīng)典用法是用一個(gè)匿名函數(shù)，像這樣：
$(document).ready(function() { // Handler for .ready() called.});jQuery 3.0 ready() 變化
在jQuery 3.0發(fā)布之前，有以下幾種方法稱(chēng)之為ready方法：
在document元素上操作： $(document).ready(handler);
在空元素上操作: $().ready(handler);
或者直接（即不在一個(gè)具體的元素上）操作: $(handler);
上述所有命名的變種在功能上是等價(jià)的。無(wú)論是哪個(gè)元素，在DOM加載完畢之后其指定的處理程序都將會(huì)被調(diào)用。換句話(huà)說(shuō)，這里的DOM加載完畢并不表示在文檔中的某個(gè)具體的元素，比如img元素，加載完畢。相反，這里表示的是整個(gè)DOM樹(shù)加載完畢。
在jQuery 3.0中,除了$(handler) 其他的ready方法都被棄用。
官方聲明為此：
這是因?yàn)檫x擇器并沒(méi)有和ready()建立聯(lián)系，不僅低效而且會(huì)導(dǎo)致瀏覽器引擎對(duì)該方法的行為進(jìn)行不正確的假設(shè)。
ready 事件和 load 事件的區(qū)別
當(dāng)DOM加載完畢且元素能夠被安全訪(fǎng)問(wèn)時(shí)就會(huì)觸發(fā)ready事件。另一方面，load事件卻在DOM和所有資源加載后觸發(fā)。
可以像下面這樣使用load事件：
$(window).on("load", function(){ // Handler when all assets (including images) are loaded});這樣的話(huà)，不僅僅要等到DOM結(jié)構(gòu)能完全訪(fǎng)問(wèn)，而且還需要等到所有的圖片資源完全加載完畢（加載時(shí)間取決于圖片文件大小）才能執(zhí)行函數(shù)。
正常的DOM操作你可能不需要load事件,但是如果你想要在所有的資源被加載完畢之前展示一個(gè)旋轉(zhuǎn)的加載器樣式，比如，又或者你想要用JS計(jì)算一下圖片的大小，這可能是一個(gè)好的選擇。
你可能不需要jQuery.ready()
ready 方法可以確保代碼只在所有DOM元素能被安全操縱時(shí)才執(zhí)行。 但這意味著什么呢？這意味著當(dāng)你要執(zhí)行的js代碼嵌在HTML中某個(gè)片段中時(shí)，瀏覽器也要加載完以下元素才能執(zhí)行。
就像下面這個(gè)例子一樣:
<!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>如果你要執(zhí)行的javascript代碼放在body末尾，你就可能不需要使用ready()方法，因?yàn)闉g覽器解析到j(luò)avascript時(shí)你可能試圖操縱和訪(fǎng)問(wèn)的DOM元素已經(jīng)被加載完了：
<!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>原生JavaScript ready()替代
對(duì)于現(xiàn)代瀏覽器以及IE9+，你可以通過(guò)監(jiān)聽(tīng) DOMContentLoaded 事件實(shí)現(xiàn)ready()相同的功能:
document.addEventListener("DOMContentLoaded", function(){ // Handler when the DOM is fully loaded});但是，請(qǐng)注意，如果事件已經(jīng)發(fā)射，回調(diào)將不會(huì)被執(zhí)行。為了確保回調(diào)總是運(yùn)行，jQuery檢查文檔reference)的“readyState”屬性，如果屬性值變?yōu)?complete，則立即執(zhí)行回調(diào)函數(shù)：
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);}包括domReady庫(kù)，已經(jīng)實(shí)現(xiàn)了這個(gè)解決方案。
老版本的IE瀏覽器
對(duì)于IE8及以下的瀏覽器，你能使用onreadystatechange 事件去監(jiān)聽(tīng)文檔的readyState 屬性：
document.attachEvent("onreadystatechange", function(){ // check if the DOM is fully loaded if(document.readyState === "complete"){ // remove the listener, to make sure it isn't fired in future document.detachEvent("onreadystatechange", arguments.callee); // The actual handler... }});或者你可以使用Load事件，如jQuery，這樣可以在任何瀏覽器上運(yùn)行。這也會(huì)導(dǎo)致一個(gè)時(shí)間延遲，因?yàn)樗鼤?huì)等待所有的資產(chǎn)被加載。
注意，在這個(gè)解決方案中你也要檢查readyState，如上文所述，這樣能確保回調(diào)總是能夠被執(zhí)行。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，如果你正在尋找一種原生js替代ready方法，你可以結(jié)合DOMContentLoaded事件一起處理。如果你的系統(tǒng)需要兼容IE話(huà)，你要確保DOM加載完成。希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
