关于网页资源的动态加载问题，并判断其加载是否成功

这个问题一直从去年遗留到现在，今天找个空，把她找到了。

 

是有

Kinogam

原创文章

 

 

 

 

用于HTML5游戏开发的资源加载器

 

之前我在开发一个飞机射击类的html5游戏，需要处理一下类似图片和音频的加载，因为web workers暂时还不是大部分浏览器都支持，所以我开发了一个资源加载器SourceLoader。
游戏开发的话，我们需要加载各种各样的素材和数据(加载数据我暂时还没并在这个类里一起处理)

为了让大家更好的关注游戏的用户体验，我们需要更多便利的工具，现在我来介绍下SourceLoader。

    var rl = new ResourceLoader();
    rl.add({ type: "image", key: "pic1", src: "1.jpg" });

ResourceLoader 有 add 方法，参数是一个json对象，type表示资源的类型，暂时有”image”,”audio”,”video” 3种，分别表示图片、音频、视频资源；key表示资源使用的时候对应的名字,比如 rl.rs["pic1"] 就可以获得 1.pig的Image对象；src表示该资源的URL地址。

以下我们用一个单元测试的用例来介绍下回调：

asyncTest("resource list items callback test", function () {
    var rl = new ResourceLoader();
    rl.add({ type: "image", key: "pic1", src: "1.jpg" });
    rl.add({ type: "audio", key: "audio1", src: "01.mp3" });
    rl.add({ type: "video", key: "video1", src: "01.mp4" }); 
 
    rl.itemLoad = function () {
        ok(true, "item " + this.type + " callback success");
    }
    rl.onload = function () {
        ok(true, "all items callback success");
        start();
    }
    rl.load();
});

itemLoad表示每个资源加载完成时的回调事件，里面的this表示当前的资源的json，比如1.pig加载完的时候，this表示{ type: “image”, key: “pic1″, src: “1.jpg” }。
onload表示所有资源都加载完之后的回调事件，平时可以在所有资源都加载完毕之后就正式进入游戏(开始执行事件绑定或开始画图),比如这样:

    fl.prototype.startGame = function (tfn) {
 
        this.x = this.canvas.width / 2 - 25;
        this.y = this.canvas.height - 50;
 
        var fobj = this;
 
        this.loader.onload = function () {
            fobj.regEvent();
            fobj.draw(fobj, tfn);
        };
        this.loader.load();
    }

要开始资源加载的时候，我们可以使用 load 方法。

另外，该类也有清空资源的方法

   rl.clearItem("pic1");
   rl.clearAll();

假如大家有兴趣使用 ResourceLoader 的话，可以关注一下，源代码可以在这里下载
https://github.com/kinogam/ResourceLoader