Learn HTML5 Development RPG Game Second step > Resource preload __html

Why do I need resources to preload? This is because if the resource is not loaded until it is used, when the resource is too large or the network is bad, the load time is too long and can affect the user experience. Pre-loading of resources can improve this situation to some extent.

The resources we need to preload here include pictures and sounds, and examples of resource definitions are as follows:

var resourcedata= {
    images:{
        //path: File relative path, Picnum: The number of small pictures in the current picture wide and high, cellsize: small picture width and height, data: Store the loaded picture.
        images001:{path: "Images/images001.png", picnum:{wnum:2,hnum:6},cellsize:{width:32,height:32}, Data:null}
        , Images002:{path: "Images/images002.png", picnum:{wnum:1,hnum:1},cellsize:{width:96,height:96}, Data:null}
    sound:{
        //soundname: Sound file name, Path: Folder relative path, data: holds the loaded sound data. Because of the inconsistent support of various browsers for sound formats, the sound file format has MP3 and Ogg two
        sound001:{soundname: "sound001", Path: "sound/", Data:null}
        , sound002: {soundname: ' sound002 ', Path: ' sound/', Data:null}}}

once the resource is defined, we can implement preload and load code examples as follows:

Jfunction.preloaddata = function () {var loadednum = 0;//Loaded resource quantity var Resourcenum = 0;//Resource quantity var postaction =
        function () {};//The callback function Imageloadpost () {//After the completion of the resource load) {//a loadednum++ is executed once for each picture successfully loaded;
            if (Loadednum = = Resourcenum) {//All picture files loaded, continue to load the sound loadednum=0;
            resourcenum=0;
        Loadaudio ()} function Audioloadpost () {//each successful load one sound executes once loadednum++; if (Loadednum = = Resourcenum) {//all sound files are loaded, execute the callback function Postaction ()}} function LoadImage () {//Load graph
        Film for (var m2 in resourcedata.images) resourcenum++;
            for (var m2 in resourcedata.images) {resourcedata.images[m2].data = new Image ();
            RESOURCEDATA.IMAGES[M2].DATA.SRC = Resourcedata.images[m2].path;
            Resourcedata.images[m2].data.onload = function () {imageloadpost ();
                } resourcedata.images[m2].data.onerror = function () {Alert ("Resource load failed.")
            ") return;
        }} function Loadaudio () {//Load sound for (Var M1 in Resourcedata.sound) resourcenum++;
            For (Var M1 in resourcedata.sound) {resourcedata.sound[m1].data = new Audio ();
                var playmsg = resourcedata.sound[m1].data.canplaytype (' Video/ogg ')//test browser supports this format sound if (""!= playmsg) {
            resourcedata.sound[m1].data.src= Resourcedata.sound[m1].path + resourcedata.sound[m1].soundname + ". ogg"; else {resourcedata.sound[m1].data.src= Resourcedata.sound[m1].path + Resourcedata.sound[m1].sou
            Ndname + ". mp3"; } resourcedata.sound[m1].data.addeventlistener ("Canplaythrough", function () {audioloadpost ()
            ;
            }, False); Resourcedata.sound[m1].data.addeventlistener (' Error ', function () {alert ("Resource load failed.
            ") return;
        }, False); }} LoadiMage ();
        return {done:function (f) {if (f) postaction = f; }
    }
};

The method is invoked as follows:

Jfunction.preloaddata () Done (function () {
    //After all resources have been loaded, execute the code at that place
});

Now that all the resources are loaded, the next step is to use these resources to make the game in mind.