DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> script的async屬性以非阻塞的模式加載腳本
script的async屬性以非阻塞的模式加載腳本
編輯:關於JavaScript     

1.HTML5實現了script的async屬性,這個新的屬性可以讓js在浏覽器中以非阻塞的模式加載,另外script還有一個defer屬性,這個屬性目前所有浏覽器都已實現(除了firefox和chrome的早期版本),IE這方面做得好,從一開始就支持些屬性。
復制代碼 代碼如下:
//async
<script async src="dquery.js" async></script>

//defer
<script async src="dquery.js" defer>
</script>

2.async和defer的區別
帶有async或者defer的script都會立刻下載並不阻塞頁面解析,而且都提供一個可選的onload事件處理, 在script下載完成後調用,用於做一些和此script相關的初始化工作。它的不同之處在於async一旦下載完成就立即執行(在window.onload事件之前),不確保執行的順序,而defer能確保js是在按照其在頁面中的順序執行(在DOMContentLoaded事件之前)。
3.為了解決浏覽器兼容問題可以使用下面的代碼進行處理
復制代碼 代碼如下:
function lazyload() {
var elem = document.createElement("script");
elem.type = "text/javascript";
elem.async = true;
elem.src = "js/dquery.js?v=11"; //對應的JS文件
document.body.appendChild(elem);
}

if (window.addEventListener) {
window.addEventListener("load", lazyload, false);
} else if (window.attachEvent) {
window.attachEvent("onload", lazyload);
} else {
window.onload = lazyload;}

由於是異步加載所以使用相應js內容就需要在window.onload事件中使用,直接寫在頁面中會報腳本錯誤,如:

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved