快捷導(dǎo)航

點(diǎn)評(píng)js異步加載的4種方式

更新時(shí)間：2015年12月22日 09:38:30 作者：黃聰

這篇文章主要介紹了點(diǎn)評(píng)js異步加載的4種方式，幫助大家更全面的了解js異步加載方式，感興趣的小伙伴們可以參考一下

js異步加載的4種方式，點(diǎn)評(píng)開始。

方案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>

點(diǎn)評(píng)：

1、需要引用jquery

2、兼容所有瀏覽器。

方案2：<script>標(biāo)簽的async="async"屬性

async的定義和用法(是HTML5的屬性)

async 屬性規(guī)定一旦腳本可用，則會(huì)異步執(zhí)行。

示例：

<script type="text/javascript" src="xxxxxxx.js" async="async"></script>

點(diǎn)評(píng)：

1、HTML5中新增的屬性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，這種方法不能保證腳本按順序執(zhí)行。

2、async 屬性僅適用于外部腳本（只有在使用 src 屬性時(shí)）。

方案3：<script>標(biāo)簽的defer="defer"屬性

defer 屬性規(guī)定是否對(duì)腳本執(zhí)行進(jìn)行延遲，直到頁(yè)面加載為止。

有的 javascript 腳本 document.write 方法來(lái)創(chuàng)建當(dāng)前的文檔內(nèi)容，其他腳本就不一定是了。

如果您的腳本不會(huì)改變文檔的內(nèi)容，可將 defer 屬性加入到 <script> 標(biāo)簽中，以便加快處理文檔的速度。因?yàn)闉g覽器知道它將能夠安全地讀取文檔的剩余部分而不用執(zhí)行腳本，它將推遲對(duì)腳本的解釋，直到文檔已經(jīng)顯示給用戶為止。

示例：

<script type="text/javascript" defer="defer"> 
alert(document.getElementById("p1").firstChild.nodeValue); 
</script>

點(diǎn)評(píng)：兼容所有瀏覽器。此外，這種方法可以確保所有設(shè)置defer屬性的腳本按順序執(zhí)行。

方案4：動(dòng)態(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>

點(diǎn)評(píng)：兼容所有瀏覽器。

以上就是針對(duì)js異步加載的4種方式進(jìn)行的區(qū)分介紹，希望對(duì)大家的學(xué)習(xí)js異步加載有所幫助。

您可能感興趣的文章: