动态加载JS和CSS

转自本人博客园博客

在项目中，除了通过压缩JS和CSS及开启web容器压缩功能可以提高性能外，还有一个更好的办法是动态加载CSS和JS

我们先来看一下下面的页面，这是一个列面页，新增用是在用一个DIV来实现的，这时要用到FCK，如果我们在加载列表时，就加载FCK，可是对列表 的显示来说FCK不需要，而加载了FCK就会带来性能的损失，那我们就需要用动态加载来实现，如果用户不点击新增FCK是不被加载的

动态加载的实现

在一个公共JS中写下如下代码 有三个公共函数：getContextPath ，importJs和loadCSS

function getContextPath() {  //以js 方式用来获取上下文     var b = document.location.pathname.substr(1);     b = "/" + b.substr(0, b.indexOf("/"));     return b; } var conextPath = getContextPath(); var impJsRec = new Object();//动态加载记录器，己加载的不再加载，要是没这个记录器，己加载的JS再加载时会和服务端多一次交互，虽然响应码是304 不传JS回来，让浏览器人缓存中加载 function importJs(url) {

    //对于URL的处理，你可以按你的方法处理，在MYPM中我们是有如下注释的允定     if (url.indexOf("../") == 0) { //如果所传URL为../打头，去掉.. 直接和conextPath拼接         url = conextPath + url.substring(2);     } else {         if (url.indexOf("/") != 0) { // 不以/打头，补上并和conextPath拼接             url = "/" + conextPath + url;         } else {             if (url.indexOf(conextPath) != 0) { URL中不含conextPath                 url = conextPath + url;             }         }     }     if (typeof impJsRec[url] != "undefined") {//到记录器中找式，如不是未定义，就返回         return;     }

         var ajaxResut = dhtmlxAjax.getSync(url).xmlDoc.responseText;//AJAX 获取要加载的JS或CSS文本     if (window.execScript) {         try {             window.execScript(ajaxResut);//执行动态加载             impJsRec[url] = true;//记录到记录器中         }         catch (err) {             return false;         }         return true;     } else {         eval.call(window, ajaxResut);//执行动态加载         impJsRec[url] = true;//记录到记录器中         return true;     }     return false; } var impCssRec = new Object(); function loadCSS(c) {     if (c.indexOf("../") == 0) {         c = conextPath + c.substring(2);     } else {         if (c.indexOf("/") != 0) {             c = "/" + conextPath + c;         } else {             if (c.indexOf(conextPath) != 0) {                 c = conextPath + c;             }         }     }     if (typeof impCssRec[c] != "undefined") {         return;     }     var d = document.createElement("link");     d.rel = "stylesheet";     d.rev = "stylesheet";     d.type = "text/css";     d.media = "screen";     d.href = c;     document.getElementsByTagName("head")[0].appendChild(d);     impCssRec[c] = true; }

按新增时，即弹出DIV界面后，调用如下

    var oEditor ;     function loadFCK(){         if(typeof oEditor != "undefined"){             oEditor.SetData("");             return;         }        importJs("/pmEditor/fckeditor.js");         var pmEditor = new FCKeditor('reProStep') ;         pmEditor.BasePath = conextPath+"/pmEditor/" ;         pmEditor.Height = 200;         pmEditor.ToolbarSet = "Basic" ;         pmEditor.ToolbarStartExpanded=false;         pmEditor.ReplaceTextarea();     }     function FCKeditor_OnComplete( editorInstance ){         oEditor = FCKeditorAPI.GetInstance('reProStep') ;         oEditor.SetData("");         return;     }