August 6, 2009
js和css文件的延迟加载
正常情况下,文件会被写到head区域,不管本页面用得到用不到就要加载,这种方式会造成一次性请求数过多加大block的时间,也容易造成文件字节过大。
延迟加载的方案是通过js在dom需要的位置load文件,比如一些需要用户触发才展示的组件,日历选择,弹出框等。
一个demo
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
function loadCSS(url){
var cssLink = document.createElement("link");
cssLink.rel = "stylesheet";
cssLink.rev = "stylesheet";
cssLink.type = "text/css";
cssLink.media = "screen";
cssLink.href = url;
document.getElementsByTagName("head")[0].appendChild(cssLink);
}