如果像上一篇文章使用基于Jquery的可視化編輯器 Xheditor 那樣設(shè)置的話，訪問(wèn)頁(yè)面時(shí)會(huì)加載70多k的jquery文件和50多k的xheditor文件，為了追求頁(yè)面默認(rèn)加載的性能提升，其實(shí)這些文件完全可以在編輯的時(shí)候異步加載的，下面是操作步驟：
1，需要用到一個(gè)異步加載js文件并執(zhí)行的函數(shù)
function getJsFile(url, callBack){
var XH = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Msxml2.XMLHTTP');
XH.open('get',url,true);
XH.onreadystatechange = function(){
if(XH.readyState == 4 && XH.status == 200){ if(window.execScript) window.execScript(XH.responseText);
else eval.call(window, XH.responseText);
eval(callBack);
}
}
XH.send('');
}
第一個(gè)參數(shù)url為js路徑，第二個(gè)回調(diào)函數(shù)是加載完js之后的操作
2，由于我采用js初始化編輯器的方式，并且我把初始化的內(nèi)容統(tǒng)一放到一個(gè)js文件以便以后統(tǒng)一更改樣式，所以我異步加載的時(shí)候會(huì)加載三個(gè)文件。使用以下代碼：
function callback(){ };
var is_load;
is_load = false;
function loads(){
if(!is_load){
getJsFile('/js/jquery-1.4.2.min.js','callback');
getJsFile('/js/editor/xheditor-en.min.js','callback');
getJsFile('js/editor/editor.js','callback');
is_load = true;
}
}; 回調(diào)函數(shù)留空，變量is_open判斷是否已經(jīng)加載過(guò)，防止重復(fù)加載
3，在textera框外面加一層span ,onclick="loads()"
大功告成了，只要一點(diǎn)擊textarea就會(huì)調(diào)用js并且執(zhí)行
不過(guò)有一點(diǎn)需要注意的是，由于xheditor默認(rèn)是根據(jù) 頁(yè)面這一條語(yǔ)句去判斷插件所在的位置，由于采用異步加載所以網(wǎng)頁(yè)頭部沒(méi)放這一行，解決的方法是在插件目錄在建一個(gè)js文件，叫xheditor-autoload.js,剛好把上面那個(gè) getJsFile()函數(shù)放進(jìn)去，然后在放到頁(yè)面頭部位置： ，大小不到1k，算可以接受。