前端交流

会员登录 jfk框架 我的简历 注册会员 Email:weizeyan52@126.com

前端技术

对异步加载javascript的研究: 作者：魏泽言发布时间：2011-12-29 16:28:10

可以批量加载js文件列表，支持回调。

演示：http://designcss.org/public/jfk/source/tests/jsdemos/loadjs.html
<script type="text/javascript">
   ;(function(window){
       function in_array(arr, value){
           var i = 0, l = arr.length;
           for(; i < l; i++){
               var val = arr[i];
               if(val === value){
                   return true;
               };
           };
           return false;
       };
       var opt = Object.prototype.toString;
       var Lib = {};
       Lib.in_array = in_array;
       Lib.LoadJs = (function(){

           var __files = [];
           return function(file, loaded) {
               var type = opt.call(file);
               if (arguments.length < 1) {
                   return;
               };
               var files = type === "[object String]" ? [file] : (type === "[object Array]" ? file: null);
               loaded = loaded || function(){};
               if (files === null) {
                   return
               };
               if (files.length === 0) {
                   return
               };
               var filelen = files.length,
               dlen = 0,
               auto = null;
               down(dlen);
               auto = setInterval(function() {
                   if (dlen === filelen) {
                       clearInterval(auto);
                       auto = null;
                       loaded()
                   }
               },
               10);
               function down(index) {
                   if (index >= filelen) {
                       return
                   };
                   var doc = document,
                   _body = doc.getElementsByTagName("body");
                   if (_body.length === 0) {
                       return
                   };
                   if (Lib.in_array(__files, files[index])) {
                       dlen += 1;
                       down(dlen)
                   } else {
                       _body = _body[0];
                       var _cache = doc.createDocumentFragment();
                       var script = doc.createElement("script");
                       script.charset = "utf-8";
                       script.src = files[index];
                       _cache.appendChild(script);
                       _body.appendChild(_cache);
                       if (doc.attachEvent) {
                           script.attachEvent("onreadystatechange",
                           function() {
                               if (/complete|loaded/.test(script.readyState) === true) {
                                   __files.push(files[index]);
                                   dlen += 1;
                                   down(dlen)
                               }
                           })
                       } else {
                           script.onload = function() {
                               __files.push(files[index]);
                               dlen += 1;
                               down(dlen)
                           }
                       }
                   }
               }
           }

       })();
       window["Lib"] = Lib;
   })(window);
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试异步加载javascript文件</title>
<script type="text/javascript">
	;(function(window){
		function in_array(arr, value){
			var i = 0, l = arr.length;
			for(; i < l; i++){
				var val = arr[i];
				if(val === value){
					return true;	
				};
			};
			return false;
		};
		var opt = Object.prototype.toString;
		var Lib = {};
		Lib.in_array = in_array;
		Lib.LoadJs = (function(){
	
			var __files = [];
			return function(file, loaded) {
				var type = opt.call(file);
				if (arguments.length < 1) {
					return;
				};
				var files = type === "[object String]" ? [file] : (type === "[object Array]" ? file: null);
				loaded = loaded || function(){};
				if (files === null) {
					return
				};
				if (files.length === 0) {
					return
				};
				var filelen = files.length,
				dlen = 0,
				auto = null;
				down(dlen);
				auto = setInterval(function() {
					if (dlen === filelen) {
						clearInterval(auto);
						auto = null;
						loaded()
					}
				},
				10);
				function down(index) {
					if (index >= filelen) {
						return
					};
					var doc = document,
					_body = doc.getElementsByTagName("body");
					if (_body.length === 0) {
						return
					};
					if (Lib.in_array(__files, files[index])) {
						dlen += 1;
						down(dlen)
					} else {
						_body = _body[0];
						var _cache = doc.createDocumentFragment();
						var script = doc.createElement("script");
						script.charset = "utf-8";
						script.src = files[index];
						_cache.appendChild(script);
						_body.appendChild(_cache);
						if (doc.attachEvent) {
							script.attachEvent("onreadystatechange", 
							function() {
								if (/complete|loaded/.test(script.readyState) === true) {
									__files.push(files[index]);
									dlen += 1;
									down(dlen)
								}
							})
						} else {
							script.onload = function() {
								__files.push(files[index]);
								dlen += 1;
								down(dlen)
							}
						}
					}
				}
			}
			
		})();
		window["Lib"] = Lib;
	})(window);
</script>
</head>

<body>

<div id="loadingBar">正在加载js队列......</div>

<script type="text/javascript">
	Lib.LoadJs([
		"http://code.jquery.com/jquery-1.7.1.js",
		"http://designcss.org/public/jfk/source/jfk.formvalidate/core/jquery.fn.formvalidate-1.0.1.js"
	], function(){
		if(jQuery){
			jQuery("#loadingBar").html("已加载");
		};
	});
</script>

</body>
</html>

对异步加载javascript的研究的相关评论

文明社会，从理性发言开始。谢绝地域攻击。