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>標簽的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>標簽的defer="defer"屬性
defer 屬性規(guī)定是否對腳本執(zhí)行進行延遲,直到頁面加載為止。
有的 javascript 腳本 document.write 方法來創(chuàng)建當前的文檔內(nèi)容,其他腳本就不一定是了。
如果您的腳本不會改變文檔的內(nèi)容,可將 defer 屬性加入到 <script> 標簽中,以便加快處理文檔的速度。因為瀏覽器知道它將能夠安全地讀取文檔的剩余部分而不用執(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>標簽
示例:
<!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ū)分介紹,希望對大家的學習js異步加載有所幫助。