HTML5實戰與剖析之延遲腳本-H5教程-PHP中文網

HTML5實戰與剖析之延遲腳本

黄舟

發布： 2017-02-10 14:26:31

原創

1946 人瀏覽過

　　什麼是延遲腳本呢?HTML5實戰與剖析之延遲腳本是幫大家解決一些JavaScript載入問題的。有了HTML5實戰與剖析之延遲腳本這個功能，我們可以不再為了JavaScript載入而發愁頁面載入的時候結構會凌亂了。

　　說到JavaScript中的延遲腳本，早在HTML4.01的時候已經有了這樣的屬性。使用起來很方便，那就是在外部引用的script標籤上加一個”defer”屬性。加了”defer”屬性，就不會影響頁面的構造了。也就是說，腳本會載入但是不執行，等到頁面全部載入完後再按順序執行。為了能夠更理解，請看下面的例子。

　　在這個例子中，會有a.html文件，這個文件中引用的script標籤沒有添加延遲腳本的屬性，而b.html文件添加了延遲腳本的屬性。分別有兩個JavaScript文件，分別是a.js和b.js，兩個檔案中各彈出自己文件的名字，以作示範。

　　a.js程式碼

alert("a");

登入後複製

b.jsd.

alert("b");

登入後複製

b.html代碼

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙</title>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
</head>
<body>
<p class="a">
梦龙小站
</p>
</body>
</html>

登入後複製

　　上面的例子可以看出。雖然我們是在head標籤中引用的a.js和b.js，但由於我們設定了」defer」屬性。所以引用的a.js和b.js會加載，只不過得在瀏覽器遇到標籤之後再執行。由於瀏覽器解析延遲屬性不一樣，延遲腳本執行的順序是不一樣的。「defer」屬性只適用於外部引用JavaScript文件，會忽略其他幾種方法引用JavaScript文件的方法。　　支援的瀏覽器有：IE9、Firefox 3.5、safari 5和chrome。其他不支援的瀏覽器會像正常一樣載入和處理腳本。

以上就是HTML5實戰與剖析之延遲腳本的內容，更多相關內容請關注PHP中文網（www.php.cn）！