判斷腳本加載是否完成的方法
更新時(shí)間：2009年05月26日 02:08:43 作者：
在“按需加載”的需求中，我們經(jīng)常會(huì)判斷當(dāng)腳本加載完成時(shí)，返回一個(gè)回調(diào)函數(shù)，那如何去判斷腳本的加載完成呢？
我們可以對(duì)加載的 JS 對(duì)象使用 onload 來(lái)判斷（js.onload），此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 瀏覽器都能很好的支持，但 IE6、IE7 卻不支持。曲線(xiàn)救國(guó) —— IE6、IE7 我們可以使用 js.onreadystatechange 來(lái)跟蹤每個(gè)狀態(tài)變化的情況（一般為 loading 、loaded、interactive、complete），當(dāng)返回狀態(tài)為 loaded 或 complete 時(shí)，則表示加載完成，返回回調(diào)函數(shù)。
對(duì)于 readyState 狀態(tài)需要一個(gè)補(bǔ)充說(shuō)明：
1.在 interactive 狀態(tài)下，用戶(hù)可以參與互動(dòng)。
2.Opera 其實(shí)也支持 js.onreadystatechange，但他的狀態(tài)和 IE 的有很大差別。
具體實(shí)現(xiàn)代碼如下：
function include_js(file) {
var _doc = document.getElementsByTagName('head')[0];
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', file);
_doc.appendChild(js);
if (!/*@cc_on!@*/0) { //if not IE
//Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload
js.onload = function () {
alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');
}
} else {
//IE6、IE7 support js.onreadystatechange
js.onreadystatechange = function () {
if (js.readyState == 'loaded' || js.readyState == 'complete') {
alert('IE6、IE7 support js.onreadystatechange');
}
}
}
return false;
}
//execution function
include_js('http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js);
對(duì)于 readyState 狀態(tài)需要一個(gè)補(bǔ)充說(shuō)明：
1.在 interactive 狀態(tài)下，用戶(hù)可以參與互動(dòng)。
2.Opera 其實(shí)也支持 js.onreadystatechange，但他的狀態(tài)和 IE 的有很大差別。
具體實(shí)現(xiàn)代碼如下：
復(fù)制代碼 代碼如下:
function include_js(file) {
var _doc = document.getElementsByTagName('head')[0];
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', file);
_doc.appendChild(js);
if (!/*@cc_on!@*/0) { //if not IE
//Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload
js.onload = function () {
alert('Firefox2、Firefox3、Safari3.1+、Opera9.6+ support js.onload');
}
} else {
//IE6、IE7 support js.onreadystatechange
js.onreadystatechange = function () {
if (js.readyState == 'loaded' || js.readyState == 'complete') {
alert('IE6、IE7 support js.onreadystatechange');
}
}
}
return false;
}
//execution function
include_js('http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js);
相關(guān)文章
JS中的函數(shù)與對(duì)象的創(chuàng)建方式
這篇文章主要介紹了JS中的函數(shù)與對(duì)象的創(chuàng)建方式，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Bootstrap基本樣式學(xué)習(xí)筆記之表格(2)
Bootstrap提供了一個(gè)清晰的創(chuàng)建表格的布局，這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之表格基本樣式的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jQuery 實(shí)現(xiàn)倒計(jì)時(shí)天,時(shí),分,秒功能
本文通過(guò)html代碼和js代碼給大家介紹了實(shí)現(xiàn)倒計(jì)時(shí)天,時(shí),分,秒功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-07
JavaScript canvas實(shí)現(xiàn)俄羅斯方塊游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)俄羅斯方塊游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
javascript 操作Word和Excel的實(shí)現(xiàn)代碼
javascript 操作Word和Excel的實(shí)現(xiàn)代碼, 需要的朋友可以參考下。2009-10-10
為了使頁(yè)面更快的完成加載，經(jīng)常需要對(duì)javascript/css代碼進(jìn)行壓縮以減小體積，這里簡(jiǎn)單列一下用過(guò)的壓縮工具，同時(shí)也作為存檔2012-02-02
這篇文章主要介紹了在HTTPS 項(xiàng)目中使用百度地圖 API，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
微信小程序onShareTimeline()實(shí)現(xiàn)分享朋友圈
這篇文章主要給大家介紹了關(guān)于微信小程序onShareTimeline()實(shí)現(xiàn)分享朋友圈的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Javascript基于OOP實(shí)實(shí)現(xiàn)探測(cè)器功能代碼實(shí)例
這篇文章主要介紹了Javascript基于OOP實(shí)實(shí)現(xiàn)探測(cè)器功能代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
JS動(dòng)態(tài)調(diào)用方法名示例介紹
在JS中如何動(dòng)態(tài)調(diào)用方法名，想必很多的朋友們都不會(huì)吧，下面為大家舉例介紹下具體的調(diào)用方法2013-12-12