1. 程式人生 > >js非同步載入的四種解決方案

js非同步載入的四種解決方案

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:標籤的async=”async”屬性
async的定義和用法(是HTML5的屬性)
async 屬性規定一旦指令碼可用,則會非同步執行。

1、HTML5中新增的屬性,Chrome、FF、IE9&IE9+均支援(IE6~8不支援)。此外,這種方法不能保證指令碼按順序執行。
2、async 屬性僅適用於外部指令碼(只有在使用 src 屬性時)。

方案3:

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

點評:相容所有瀏覽器。此外,這種方法可以確保所有設定defer屬性的指令碼按順序執行。

方案4:動態建立

<!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>

點評:相容所有瀏覽器。