首頁  >  文章  >  web前端  >  HTML5實戰與剖析之延遲腳本

HTML5實戰與剖析之延遲腳本

黄舟
黄舟原創
2017-02-10 14:26:311885瀏覽

  什麼是延遲腳本呢?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)!




陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn