动态载入IMG, JS和CSS等文件

　　android的webAPP开发中，如果使用载入远程服务器的html页面来实现的方式，会牵涉到第一次加载出现白屏或者长时间等待的问题；那么在这个时候需要提升用户体验，需要在加载远程html\javascript\css\image等文件的时候，现实Loading界面，这个时候需要将图片、脚本、样式表文件等都要作为动态文件载入，javascript和image载入问题不大，相对比较简单，方式如下：

LoadImage : function (url, callback) {
var img = new Image();
img.src = url;
img.onload = function () {
if (callback) callback();
};
},

LoadScript : function (url, callback) {
var script = document.createElement("script")
script.type = "text/javascript";
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
script.onload = function () {
if (callback) callback();
};
},

可以将上面的代码放如前面所说的小JQuery库中，然后实现批量载入：

LoadImages : function (arr, progress, callback){
var completed = 0;
for (var i = 0; i < arr.length; i++) {
$.LoadImage(arr[i], function() {
completed++;
progress && progress(completed, arr.length);
if(completed >= arr.length) {
callback && callback();
}
});
}
},

LoadScripts : function(arr, progress, callback, no){
var i =  no || 0;
if(arr.length > 0){
var arg = arguments;
$.LoadScript(arr[i], function() {
i++;
progress && progress(i, arr.length);
if(i >= arr.length) {
callback && callback();
}
else{
arg.callee(arr, progress, callback, i);
}
});
}
},

这里的LoadScripts方法是按照数组依次排序载入的，这样是防止类库载入的时候发生网络延迟而导致下面的类库执行中出错。

　　与载入javaScript和image都问题不大，但是载入css文件的时候就发生问题了，在android下测试中发现css文件不会发生onload事件，所以无法识别css文件是否载入完成。所以想使用载入script的类似的方式来载入css文件在android上是行不通了。

　　在后来实现$.ajax功能的时候，突然冒出一个主意，可不可以用ajax来载入css文件，然后操作DOM，将css文件内容插入<style>节点中，方式如下：

LoadCss : function (url, callback) {
$.ajax({
url : url,
success : function(data){
$.Get('head').insert({ type : 'style', html : data });
callback && callback();
}
});
},

经过测试，果然可以，不过css中包含图片地址信息需要设为绝对地址，或者按照当前文件路径来写就可以了，效果如下：