js異步加載的4種方式，點評開始。
方案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>標(biāo)簽的async="async"屬性
async的定義和用法(是HTML5的屬性)
async 屬性規(guī)定一旦腳本可用，則會異步執(zhí)行。
示例：
<script type="text/javascript" src="xxxxxxx.js" async="async"></script>
點評：
1、HTML5中新增的屬性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，這種方法不能保證腳本按順序執(zhí)行。
2、async 屬性僅適用于外部腳本（只有在使用 src 屬性時）。
方案3：<script>標(biāo)簽的defer="defer"屬性
defer 屬性規(guī)定是否對腳本執(zhí)行進行延遲，直到頁面加載為止。
有的 javascript 腳本 document.write 方法來創(chuàng)建當(dāng)前的文檔內(nèi)容，其他腳本就不一定是了。
如果您的腳本不會改變文檔的內(nèi)容，可將 defer 屬性加入到 <script> 標(biāo)簽中，以便加快處理文檔的速度。因為瀏覽器知道它將能夠安全地讀取文檔的剩余部分而不用執(zhí)行腳本，它將推遲對腳本的解釋，直到文檔已經(jīng)顯示給用戶為止。
示例：
<script type="text/javascript" defer="defer"> alert(document.getElementById("p1").firstChild.nodeValue); </script> 點評：兼容所有瀏覽器。此外，這種方法可以確保所有設(shè)置defer屬性的腳本按順序執(zhí)行。
方案4：動態(tài)創(chuàng)建<script>標(biāo)簽
示例：
<!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>點評：兼容所有瀏覽器。
以上就是針對js異步加載的4種方式進行的區(qū)分介紹，希望對大家的學(xué)習(xí)js異步加載有所幫助。
新聞熱點
疑難解答
