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 屬性規定一旦腳本可用,則會異步執行。
示例:
<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>
點評:兼容所有浏覽器。
以上就是針對js異步加載的4種方式進行的區分介紹,希望對大家的學習js異步加載有所幫助。