欢迎来到 jackNEss'窝窝
I like simple mind

js css文件动态加载器

2011年11月11日

js css文件动态加载器

一款实现无阻塞加载javascript的js、css动态加载器(css 是顺带的功能…),作用是给目标js、css通过createElement方式动态append到body中的head里头,并提供加载成功时回调函数的功能。

实现原理

通过 createElement 的方式 创建所需标签(script/link),然后使用 appendChild方法将标签插入到 head的子节点处。

需思考问题

  • 如何检测js是否加载完成?
  • css/js加载时会引发阻塞否?
  • 如果我一个函数需要同时引用到几个js时,如何处理能让所有js加载后再去回调函数?

JS源代码

这个api支持多个js/css文件同时读取,但2者必须分开,不能混合一次性加载;本api支持链式操作

演示地址: http://www.jackness.org/lab/jcloader/demo.html

/*
 * jcLoader()  一个简单的 js、css动态加载 api
 * jcLoader().load(url,callback)  加载函数 支持链式操作
 * -url 需要加载的 js/css 地址,支持同时加载多个 地址之间用 ‘,’隔开
 * -callback 加载完成 url里面的文件之后触发的事件
 * ---------------------------------------------------
 * example:
 
完整版: 
jcLoader().load({
	type:"js",
	url:"temp/demojs01.js,temp/demojs02.js,temp/demojs03.js,temp/demojs04.js,temp/demojs05.js,"
},function(){
	alert("all file loaded");
}).load({
	type:"css",
	url:"temp/democss01.css"
},function(){
	alert("all css file loaded");
})
简单版:
jcLoader().load({type:"js",url:"temp/demojs01.js"},function(){alert("all file loaded")});
jcLoader().load({type:"css",url:"temp/democss01.css"},function(){alert("all css file loaded")});

 * ---------------------------------------------------
 * power by jackNEss
 * date:2011-11-10(光棍节前夕)
 * ver 1.0
 */
var jcLoader = function(){
	
	var dc = document;
	
	function createScript(url,callback){
		var urls = url.replace(/[,]\s*$/ig,"").split(",");
		var scripts = [];
		var completeNum = 0;
		for( var i = 0; i < urls.length; i++ ){
			
			scripts[i] = dc.createElement("script");
			scripts[i].type = "text/javascript";
			scripts[i].src = urls[i];
			dc.getElementsByTagName("head")[0].appendChild(scripts[i]);
			
			if(!callback instanceof Function){return;}
			
			if(scripts[i].readyState){
				scripts[i].onreadystatechange = function(){
					
					if( this.readyState == "loaded" || this.readyState == "complete" ){
						this.onreadystatechange = null;
						completeNum++;
						completeNum >= urls.length?callback():"";
					}
				}
			}
			else{
				scripts[i].onload = function(){
					completeNum++;
					completeNum >= urls.length?callback():"";
				}
			}
			
		}
		
	}
	
	function createLink(url,callback){
		var urls = url.replace(/[,]\s*$/ig,"").split(",");
		var links = [];
		for( var i = 0; i < urls.length; i++ ){
			links[i] = dc.createElement("link");
			links[i].rel = "stylesheet";
			links[i].href = urls[i];
			dc.getElementsByTagName("head")[0].appendChild(links[i]);
		}
		callback instanceof Function?callback():"";
	}
	return{
		load:function(option,callback){
			var _type = "",_url = "";
			var _callback = callback
			option.type? _type = option.type:"";
			option.url? _url = option.url:"";
			typeof option.filtration == "boolean"? filtration = option.filtration:"";
			
			switch(_type){
				case "js":
				case "javascript": createScript(_url,_callback); break;
				case "css": createLink(_url,_callback); break;
			}
			
			return this;
		}
	}
}	

- – 居然赶上 神棍节发布文章,嘛,诸君,神棍节快乐~

分类javascript
阅读 2,703
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS