如果像上一篇文章使用基于Jquery的可视化编辑器 Xheditor 那样设置的话,访问页面时会加载70多k的jquery文件和50多k的xheditor文件,为了追求页面默认加载的性能提升,其实这些文件完全可以在编辑的时候异步加载的,下面是操作步骤:
1,需要用到一个异步加载js文件并执行的函数
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初始化编辑器的方式,并且我把初始化的内容统一放到一个js文件以便以后统一更改样式,所以我异步加载的时候会加载三个文件。使用以下代码:
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并且执行
不过有一点需要注意的是,由于xheditor默认是根据 页面这一条语句去判断插件所在的位置,由于采用异步加载所以网页头部没放这一行,解决的方法是在插件目录在建一个js文件,叫xheditor-autoload.js,刚好把上面那个 getJsFile()函数放进去,然后在放到页面头部位置: ,大小不到1k,算可以接受。