如果像上一篇文章使用基于Jquery的可視化編輯器 Xheditor 那樣設置的話,訪問頁面時會加載70多k的jquery文件和50多k的xheditor文件,為了追求頁面默認加載的性能提升,其實這些文件完全可以在編輯的時候異步加載的,下面是操作步驟:
1,需要用到一個異步加載js文件并執(zhí)行的函數
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('');
}
第一個參數url為js路徑,第二個回調函數是加載完js之后的操作
2,由于我采用js初始化編輯器的方式,并且我把初始化的內容統(tǒng)一放到一個js文件以便以后統(tǒng)一更改樣式,所以我異步加載的時候會加載三個文件。使用以下代碼:
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;
}
}; 回調函數留空,變量is_open判斷是否已經加載過,防止重復加載
3,在textera框外面加一層span ,onclick="loads()"
大功告成了,只要一點擊textarea就會調用js并且執(zhí)行
不過有一點需要注意的是,由于xheditor默認是根據 頁面這一條語句去判斷插件所在的位置,由于采用異步加載所以網頁頭部沒放這一行,解決的方法是在插件目錄在建一個js文件,叫xheditor-autoload.js,剛好把上面那個 getJsFile()函數放進去,然后在放到頁面頭部位置: ,大小不到1k,算可以接受。