方案1:$(document).ready
<!DOCTYPE html><html><head> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { alert("載入完成。"); }); </script></head><body><img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" /></body></html>
1、需要引用jquery
2、相容所有瀏覽器。
方案2:<script>標籤的async="async"屬性
async的定義和用法(是HTML5的屬性)
async 屬性規定一旦指令碼可用,則會非同步執行。
<script type="text/javascript" src="xxxxxxx.js" async="async"></script>
1、HTML5中新增的屬性,Chrome、FF、IE9&IE9+均支援(IE6~8不支援)。此外,這種方法不能保證指令碼按順序執行。
2、async 屬性僅適用於外部指令碼(只有在使用 src 屬性時)。
方案3:<script>標籤的defer="defer"屬性
defer 屬性規定是否對指令碼執行進行延遲,直到頁面載入為止。
有的 javascript 指令碼 document.write 方法來建立當前的文檔內容,其他指令碼就不一定是了。
如果您的指令碼不會改變文檔的內容,可將 defer 屬性加入到 <script> 標籤中,以便加快處理文檔的速度。因為瀏覽器知道它將能夠安全地讀取文檔的剩餘部分而不用執行指令碼,它將延遲對指令碼的解釋,直到文檔已經顯示給使用者為止。
<script type="text/javascript" defer="defer"> alert(document.getElementById("p1").firstChild.nodeValue);</script>
相容所有瀏覽器。此外,這種方法可以確保所有設定defer屬性的指令碼按順序執行。
方案4:動態建立<script>標籤
<!DOCTYPE html><html><head> <script type="text/javascript"> (function(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = "http://code.jquery.com/jquery-1.7.2.min.js"; var tmp = document.getElementsByTagName('script')[0]; tmp.parentNode.insertBefore(s, tmp); })(); </script></head><body><img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" /></body></html>
相容所有瀏覽器。