如果只是简单的让js延迟加载，那只需要在页面尾部加上这样的代码:

 

var oHead = document.getElementsByTagName('HEAD').item(0);
	  var oScript= document.createElement("script");
	  oScript.id = id;
	  oScript.type = "text/javascript";
	  oScript.src=src;
	  oHead.appendChild(oScript);

 

 但这样加载有个问题，如果我立刻在后面调用这个延迟加载的js里面的方法或者变量就会报错，因为新加载的js还没执行完呢。并且document的onload方法不会等待这样的延迟js加载成功。

还有就是这样加载的js不能保证顺序。也就是不能保证先append的js先执行。如果后面的js依赖于前面的js，而前面的js比较大，加载延迟，则后面的js执行的时候就可能报错。

我在修改这个高亮代码的脚本的时候就遇到了这样的问题。

并不是所有的文章都有代码，并且每篇文章可能出现的代码语言不一样，需要根据内容加载不同的库。

shCore.js是核心js，需要先加载。然后是各个语言的js，具体取决于文章内容中出现的代码语言。如  shBrushJava.js,shBrushBash.js等。

后面这些js都依赖于shCore.js。当所有的js都加载完的时候，才能调用：

SyntaxHighlighter.highlight();

高亮代码。

参考了一些文章，终于弄出一个解决方案:

 

if(!window.BrushUtils) var BrushUtils = (function(){
	var ut = {
		baseurl:"",
		resources:[],
		brushMap : {js:"JScript",jscript:"JScript",javascript:"JScript",
					  bash:"Bash",shell:"Bash",css:"Css",actionscript3:"AS3",as3:"AS3",cpp:"Cpp",c:"Cpp",
					  csharp:"CSharp",groovy:"Groovy",java:"Java",javafx:"JavaFX",jfx:"JavaFX",
					  perl:"Perl",pl:"Perl",php:"Php",text:"Plain",plain:"Plain",py:"Python",python:"Python",
					  ruby:"Ruby",ror:"Ruby",rails:"Ruby",scala:"Scala",sql:"Sql",xml:"Xml",html:"Xml",xhtml:"Xml",xslt:"Xml"
		},
		parseBrush :function(){
			  var pres = document.getElementsByTagName("pre");
			  var brushs = new Array();
			  for(var i=0;i0?function(){ut.loadNext();}:function(){SyntaxHighlighter.config.clipboardSwf = ut.baseurl 'scripts/clipboard.swf';SyntaxHighlighter.highlight();};
				if(resource.type=='js'){
					ut.loadJs(resource.url,callback);
				}else if(resource.type='css'){
					ut.loadStyle(resource.url,callback);
				}
			}
		},
		loadJs : function(src,callback){
				  var scriptTags = document.getElementsByTagName('script');
				  var oHead = document.getElementsByTagName('HEAD').item(0);
				  var script= document.createElement("script");
				  script.type = "text/javascript";
				  script.src=src;
				  script.onreadystatechange= function () {
							if (this.readyState == 'loaded' || this.readyState == 'complete') {
								callback();
							}
						}
				  script.onload= callback;
				  oHead.appendChild(script);
			   },
		 loadStyle : function(url){
				   var oHead = document.getElementsByTagName('HEAD').item(0);
					var style= document.createElement("link");
					style.type = "text/css";
					style.rel="stylesheet";
					style.href=url;
				   oHead.appendChild(style);
		  }
		};
	return ut;
	})();

 

 

调用：

 

var syntaxhighlighter_url = "/scripts/syntaxhighlighter/";
   BrushUtils.loadLibs(syntaxhighlighter_url);

 

 

主要在于对script的加载成功事件的监听。ie的事件是onreadystatechange，firefox的是onload.把需要加载的js放在一个队列里，当前一个加载完成时候，从队列里取出下一个js，继续加载。

经过测试，这个方法在ie,firefox,opera上都可以使用。但据说Safari上是没这个事件的（未测试）。

本来想给样式表也加上事件监听，结果发现样式表加载成功在firefox下是不触发事件的，ie下可以。

参考网址:

http://unixpapa.com/js/dyna.html