army8735

近日，在秦歌的blog中看到动态加载的内容，主要是说YUI3.0在动态加载js的一点小bug。当时想了个问题：如何侦听动态加载的内容被成功加载了，翻阅一番后记录下来。

Omar AL Zabir曾在他的Ensure library库中写过类似的东西，用以动态加载css和js文件。加载js时，基本伪代码是这样：

var script = document.createElement("script");
script.onreadystatechange = function() {
	//
}
script.onload = function () {
	//
}
script.setAttribute("src", "xxx.js");
document.head.appendChild(script);

原理就是创建一个script标签，设置src属性后附加到head区域。ie中侦听onreadystatechange，其它的侦听onload。不过有些较古老的浏览器对这两种方法都不支持（Omar举例为Safari 2），解决的办法是通过xhr加载js文件资源，再eval()出来。目前来看，似乎已没必要花费经历去为了旧版本兼容了。

凑巧，前几日Mootools官网也发布了一个延迟独立加载js的库Depender，它被包括在More中（貌似1.2.4.1还有些性能问题，我希望最终它能够被包含在Core中）。看看其核心实现：

new Element('script', {
	src: scriptPath + (this.options.noCache ? '?noCache=' + new Date().getTime() : ''),
	events: {
		load: loaded,
		readystatechange: function(){
			if (['loaded', 'complete'].contains(this.readyState)) loaded();
		},
		error: error
	}
}).inject(this.options.target || document.head);

亦是一样。不过在我测试过程中，ie的readystate的值在加载完成后都是loaded（ie6、7、8），并没有出现complete的情况，不知道mt为何要多判别它。

另外关于css动态加载，似乎并没有可行的侦听的方法。虽然ie中侦听onreadystatechange的值为complete，但是firefox 3.5和chrome里却侦听不到onload事件。不过一般情况下，样式的加载都是异步的，同步的需求很少。除非考虑到某个地方必须等样式加载成功后才去执行显示，否则没必要使用同步。

我能想到的解决办法就是通过xhr读取css文件内容，然后插入到style标签中来实现同步读取，不知道可不可行。