快捷導(dǎo)航

JS動(dòng)態(tài)插入并立即執(zhí)行回調(diào)函數(shù)的方法

更新時(shí)間：2016年04月21日 10:52:13 作者：zhangw428

這篇文章主要介紹了JS動(dòng)態(tài)插入并立即執(zhí)行回調(diào)函數(shù)的方法,實(shí)例分析了動(dòng)態(tài)插入js文件及執(zhí)行回調(diào)函數(shù)的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS動(dòng)態(tài)插入并立即執(zhí)行回調(diào)函數(shù)的方法。分享給大家供大家參考，具體如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<div id="loading">加載中……</div>
<mce:script type="text/JavaScript">
<!--
function loadJs(id,url,callback){
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = url;
 script.id = id;
 script.onload = script.onreadystatechange = function(){
  alert(script.readyState);
  if(script.readyState && script.readyState != 'loaded' && script.readyState != 'complete') return ;
  script.onreadystatechange = script.onload = null
  if(callback) callback();
 }
 document.body.appendChild(script);
}
loadJs('jQuery','jquery.js',function(){$('#loading').html('jquery.js加載完畢')})
// --></mce:script>
</body>
</html>

動(dòng)態(tài)插入js文件在提高頁(yè)面加載速度和跨域問(wèn)題上有非常重要的作用。上面就是一個(gè)簡(jiǎn)單例子。

ie 上支持 onreadystatechange , 不支持 onload

firefox上支持 onload , 不支持onreadystatechange

ie上面不一定loaded 或者是 complete觸發(fā) ，或者兩個(gè)都會(huì)觸發(fā)，所以用或來(lái)判斷。

需要注意的是script.onreadystatechange 和script.readyState 的大小寫(xiě)形式，不區(qū)分大小寫(xiě)就可能導(dǎo)致不易發(fā)現(xiàn)的錯(cuò)誤。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript如何實(shí)現(xiàn)監(jiān)聽(tīng)鍵盤(pán)輸入和鼠標(biāo)監(jiān)點(diǎn)擊
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)監(jiān)聽(tīng)鍵盤(pán)輸入和鼠標(biāo)監(jiān)點(diǎn)擊，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
javascript函數(shù)的四種調(diào)用模式
本文詳細(xì)介紹了javascript函數(shù)的四種調(diào)用模式。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
有一段有意思的代碼-javascript現(xiàn)實(shí)多行信息
有一段有意思的代碼-javascript現(xiàn)實(shí)多行信息...
2007-08-08
Openlayers學(xué)習(xí)之加載鷹眼控件
這篇文章主要介紹了Openlayers學(xué)習(xí)之加載鷹眼控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
JS setCapture 區(qū)域外事件捕捉
鼠標(biāo)捕獲(setCapture)作用是將鼠標(biāo)事件捕獲到當(dāng)前文檔的指定的對(duì)象。這個(gè)對(duì)象會(huì)為當(dāng)前應(yīng)用程序或整個(gè)系統(tǒng)接收所有鼠標(biāo)事件。
2010-03-03
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)加載進(jìn)度條代碼超簡(jiǎn)單
網(wǎng)頁(yè)進(jìn)度條能夠更好的反應(yīng)當(dāng)前網(wǎng)頁(yè)的加載進(jìn)度情況，loading進(jìn)度條可用動(dòng)畫(huà)的形式從開(kāi)始0%到100%完成網(wǎng)頁(yè)加載這一過(guò)程。代碼簡(jiǎn)單易懂，效果非常好，需要的一起學(xué)習(xí)學(xué)習(xí)吧
2015-09-09
解決webpack打包速度慢的解決辦法匯總
本篇文章主要介紹了徹底解決webpack打包慢的解決辦法匯總，詳細(xì)的介紹了3種方法，有興趣的可以了解一下
2017-07-07
17道題讓你徹底理解JS中的類(lèi)型轉(zhuǎn)換
這篇文章主要給大家介紹了關(guān)于如何通過(guò)17道題讓你徹底理解JS中的類(lèi)型轉(zhuǎn)換的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
webpack+vue2構(gòu)建vue項(xiàng)目骨架的方法
本篇文章主要介紹了webpack+vue2構(gòu)建vue項(xiàng)目骨架的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
基于JavaScript實(shí)現(xiàn)自定義滾動(dòng)條
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)自定義滾動(dòng)條，可以直接使用的滾動(dòng)條，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01