判斷腳本加載是否完成的方法
更新時間：2009年05月26日 02:08:43 作者：
在“按需加載”的需求中，我們經常會判斷當腳本加載完成時，返回一個回調函數(shù)，那如何去判斷腳本的加載完成呢？
我們可以對加載的 JS 對象使用 onload 來判斷（js.onload），此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 瀏覽器都能很好的支持，但 IE6、IE7 卻不支持。曲線救國 —— IE6、IE7 我們可以使用 js.onreadystatechange 來跟蹤每個狀態(tài)變化的情況（一般為 loading 、loaded、interactive、complete），當返回狀態(tài)為 loaded 或 complete 時，則表示加載完成，返回回調函數(shù)。
對于 readyState 狀態(tài)需要一個補充說明：
1.在 interactive 狀態(tài)下，用戶可以參與互動。
2.Opera 其實也支持 js.onreadystatechange，但他的狀態(tài)和 IE 的有很大差別。
具體實現(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);
對于 readyState 狀態(tài)需要一個補充說明：
1.在 interactive 狀態(tài)下，用戶可以參與互動。
2.Opera 其實也支持 js.onreadystatechange，但他的狀態(tài)和 IE 的有很大差別。
具體實現(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);
相關文章
這篇文章主要介紹了JS中的函數(shù)與對象的創(chuàng)建方式，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
Bootstrap提供了一個清晰的創(chuàng)建表格的布局，這篇文章主要介紹了Bootstrap學習筆記之表格基本樣式的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
本文通過html代碼和js代碼給大家介紹了實現(xiàn)倒計時天,時,分,秒功能，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
JavaScript canvas實現(xiàn)俄羅斯方塊游戲
這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)俄羅斯方塊游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
javascript 操作Word和Excel的實現(xiàn)代碼
javascript 操作Word和Excel的實現(xiàn)代碼, 需要的朋友可以參考下。2009-10-10
為了使頁面更快的完成加載，經常需要對javascript/css代碼進行壓縮以減小體積，這里簡單列一下用過的壓縮工具，同時也作為存檔2012-02-02
這篇文章主要介紹了在HTTPS 項目中使用百度地圖 API，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
微信小程序onShareTimeline()實現(xiàn)分享朋友圈
這篇文章主要給大家介紹了關于微信小程序onShareTimeline()實現(xiàn)分享朋友圈的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
Javascript基于OOP實實現(xiàn)探測器功能代碼實例
這篇文章主要介紹了Javascript基于OOP實實現(xiàn)探測器功能代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
在JS中如何動態(tài)調用方法名，想必很多的朋友們都不會吧，下面為大家舉例介紹下具體的調用方法2013-12-12