jQuery的ready函數為我們編寫開啟頁面時啟動並執行指令碼提供了方便，讓我們不必再關注什麼window.onLoad之類的事件，但是最近發現自己之前寫的代碼有點濫用這個函數了。
查看下之前寫的代碼，有許多這樣的代碼：
$(function(){//do something. });
這裡面可能寫一些初始化樣式、給其他dom元素附加事件處理等。剛開始沒發現什麼問題，但是在頁面引用了一些下載緩慢的圖片時，問題出現了：在頁面html下載完，到所有資源全部下載完之間，綁定dom元素上綁定的事件無法執行、用指令碼綁定的樣式無效等混亂情況，也就是ready麼有執行。
Ok，我的情況比較特殊，可能這個情況對於大部分同學是不可能遇到的，但是在開發中我們不得不考慮在某種比較糟糕的情況下，某個使用者開啟了你的網站，然後正好你的頁面上有許多圖片。。。那他只能等著了吧。。。
解決辦法： 返璞歸真在ready出現之前我們的寫法可能是這樣的：
在文檔中插入一段指令碼塊
<span id=”test1”>hello world</span><script type=”text/javascript”>alert(document.getElementById(“test1”).innerHTML);</script>
這樣的代碼在瀏覽器載入到這裡時就會執行。注意，如果在這裡的DOM元素test1在script塊後面，這裡就會出現異常。
我只是需要在頁面載入時候就執行這些代碼，不需要頁面所有資源都載入完，所以，沒必要讓我坐在這等著“緩慢“的ready吧。
嗯，思考一下，整理下html結構頁面中到處都是這個script塊也不好，不利於閱讀，那就把他們整理一塊拉到文檔結尾吧。
<html><head>//讓這裡就放一些title、meta、link之類的神馬東西吧。</head><body>Body html…….<script type=”text/javascript”>alert(“把你的代碼從head拉到這裡來吧。。。放心的操作文檔，不用擔心找不到元素，也不用window.onLoad、$.ready神馬的了”);</body></html>
Ok，如果您確實需要等著資源檔下載完才能執行指令碼，那您還是老老實實的用jQuery的ready吧。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
