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

猫性男孩

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

01	LoadImage : function (url, callback) {

[backcolor=rgb(248, 248, 248) !important]

02	var img = new Image();

03	img.src = url;

[backcolor=rgb(248, 248, 248) !important]

04	img.onload = function () {

05	if (callback) callback();

[backcolor=rgb(248, 248, 248) !important]

06

};

07

},

[backcolor=rgb(248, 248, 248) !important]

08

09	LoadScript : function (url, callback) {

[backcolor=rgb(248, 248, 248) !important]

10	var script = document.createElement("script")

11	script.type = "text/javascript";

[backcolor=rgb(248, 248, 248) !important]

12	script.src = url;

13	document.getElementsByTagName("head")[0].appendChild(script);

[backcolor=rgb(248, 248, 248) !important]

14	script.onload = function () {

15	if (callback) callback();

[backcolor=rgb(248, 248, 248) !important]

16

};

17

},

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

01	LoadImages : function (arr, progress, callback){

[backcolor=rgb(248, 248, 248) !important]

02	var completed = 0;

03	for (var i = 0; i < arr.length; i++) {

[backcolor=rgb(248, 248, 248) !important]

04	$.LoadImage(arr, function() {

05	completed++;

[backcolor=rgb(248, 248, 248) !important]

06	progress && progress(completed, arr.length);

07	if(completed >= arr.length) {

[backcolor=rgb(248, 248, 248) !important]

08	callback && callback();

09

}

[backcolor=rgb(248, 248, 248) !important]

10

});

11

}

[backcolor=rgb(248, 248, 248) !important]

12

},

13

[backcolor=rgb(248, 248, 248) !important]

14	LoadScripts : function(arr, progress, callback, no){

15	var i =  no || 0;

[backcolor=rgb(248, 248, 248) !important]

16	if(arr.length > 0){

17	var arg = arguments;

[backcolor=rgb(248, 248, 248) !important]

18	$.LoadScript(arr, function() {

19

i++;

[backcolor=rgb(248, 248, 248) !important]

20	progress && progress(i, arr.length);

21	if(i >= arr.length) {

[backcolor=rgb(248, 248, 248) !important]

22	callback && callback();

23

}

[backcolor=rgb(248, 248, 248) !important]

24

else{

25	arg.callee(arr, progress, callback, i);

[backcolor=rgb(248, 248, 248) !important]

26

}

27

});

[backcolor=rgb(248, 248, 248) !important]

28

}

29

},

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