黃聰:異步加載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="https://images0.cnblogs.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="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />
        </body>
</html>

 點評:兼容所有瀏覽器。

 

推薦使用第一個方案。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM