In dem Buch Pro HTML5 Games gibt es den folgenden Code:
// Load all data and images for a specific level
load:function(number){
// declare a new currentLevel object
game.currentLevel = { number: number, hero: [] };
game.score = 0;
$('#score').html('Score: '+game.score);
var level=levels.data[number];
//load the background, foreground, and slingshot images
game.currentLevel.backgroundImage=loader.loadImage("images/backgrounds/"+level.background+
".png");
game.currentLevel.foregroundImage=loader.loadImage("images/backgrounds/"+level.foreground+
".png");
game.slingshotImage=loader.loadImage("images/slingshot.png");
game.slingshotFrontImage =loader.loadImage("images/slingshot-front.png");
//Call game.start() once the assets have loaded
if(loader.loaded){
game.start()
} else {
loader.onload = game.start;
}
}
Das Loader-Objekt ist das folgende:
var loader= {
loaded:true,
loadedCount:0, // Assets that have been loaded so far
totalCount:0, // Total number of assets that need to be loaded
init:function(){
// check for sound support
var mp3Support,oggSupport;
var audio =document.createElement('audio');
if (audio.canPlayType) {
// Currently canPlayType() returns: "", "maybe" or "probably"
mp3Support ="" != audio.canPlayType('audio/mpeg');
oggSupport ="" != audio.canPlayType('audio/ogg; codecs="vorbis"');
} else {
//The audio tag is not supported
mp3Support =false;
oggSupport =false;
}
// Check for ogg, then mp3, and finally set soundFileExtn to undefined
loader.soundFileExtn =oggSupport?".ogg":mp3Support?".mp3":undefined;
},
loadImage:function(url){
this.totalCount++;
this.loaded =false;
$('#loadingscreen').show();
var image =new Image();
image.src =url;
image.onload =loader.itemLoaded;
return image;
},
soundFileExtn:".ogg",
loadSound:function(url){
this.totalCount++;
this.loaded =false;
$('#loadingscreen').show();
var audio =new Audio();
audio.src =url +loader.soundFileExtn;
audio.addEventListener("canplaythrough", loader.itemLoaded, false);
return audio;
},
itemLoaded:function(){
loader.loadedCount++;
$('#loadingmessage').html('Loaded '+loader.loadedCount+' of '+loader.totalCount);
if (loader.loadedCount === loader.totalCount){
// Loader has loaded completely..
loader.loaded=true;
// Hide the loading screen
$('#loadingscreen').hide();
//and call the loader.onload method if it exists
if(loader.onload){
loader.onload();
loader.onload =undefined;
}
}
}
Ich habe folgende Fragen:
1) Wenn Onload eine Methode ist, sollten wir sie nicht beispielsweise als imageThatWeWantToLoad.onload(stuff we want to do after image has been loaded) anstelle von imageThatWeWantToLoad.onload = (do what we want to do after image has been loaded) verwenden?
2) Was macht der loader.onload=game.start; Teil genau (Spiel ist ein Objekt und Start ist eine im Spielobjekt definierte Methode) genau? Ich glaube, ich habe verstanden, dass loader.onload=game.start; bedeutet, dass nach dem Laden des Loader-Objekts game.start aufgerufen wird, aber da game.start eine Methode ist, sollte es nicht loader.onload=game.start(); sein. ?
3) Bedeutet onload auch "vom Browser empfangene Daten"?
4 Antworten
1) image.onload ist an sich keine Methode. Es ist nur eine Eigenschaft, genau wie name eine Eigenschaft in dog ist, nachdem wir sie ausgeführt haben
dog = { name: null };
Eine Eigenschaft eines Objekts ist eine Methode, wenn sie eine Funktion enthält. So,
dog['bark'] = function() { console.log("Woof"); };
Jetzt könnten wir dog.bark() tun, um diese Methode aufzurufen.
Wenn image.onload zum Zeitpunkt des Ladens des Bildes eine Methode ist (d. H. Wenn sie eine Funktion enthält), wird sie vom Browser ausgeführt. Es ist keine Methode, die wir aufrufen sollen, sondern definieren .
2) Es macht genau das, wie es aussieht - weist loader.onload den Inhalt von game.start (eine Funktion) zu. Jetzt beziehen sich beide Eigenschaften auf dieselbe Funktion. Wenn wir loader.onload = game.start() machen würden, würde es game.start ausführen und das Ergebnis der Ausführung loader.onload zuweisen; aber wir wollen die Funktion selbst zuweisen, also keine Klammern.
Das Laden in JavaScript kann wie folgt beschrieben werden:
Auf onload wird hier als Eigenschaft zugegriffen und wir weisen die Eigenschaft mit dem Ergebnis der Funktion zu. Die Funktion wird also ausgeführt und das Endergebnis wird der Eigenschaft zugewiesen. Das Aufrufen der Funktion und das Zuweisen des Ergebnisses zur Eigenschaft erfolgt also gleichzeitig in einer einzigen Codezeile.
In diesem Fall möchten wir wissen, ob die Loader-Onload-Methode ausgeführt wurde oder nicht, indem wir die Eigenschaft loader.loaded überprüfen. Wenn es ausgeführt wurde, rufen Sie game.start () auf, ohne einer Funktion zuzuweisen, die nacheinander ausgeführt werden soll, wie die Onload-Methode ausgeführt wurde. Wenn es nicht ausgeführt wurde, haben wir die Funktion game.start der Funktion load.onload zugewiesen, sodass wir sie als Eigenschaft verwendet haben, um die Funktion einer anderen Funktion zuzuweisen. Wenn also die Onload-Methode aufgerufen wird, wird jetzt game.start ausgeführt () Funktion als Onload wird durch game.start ersetzt.
Onload bedeutet, dass das Objekt geladen wurde. Wir verwenden das Onload-Ereignis im Body-Tag von HTML, um zu wissen, dass die Webseite den gesamten Inhalt geladen hat, und wir können unsere Aktionen jetzt ausführen, um ein reibungsloses Funktionieren zu gewährleisten.
Die Eigenschaft loader.onload ist ein Zeiger auf eine Funktion (technisch gesehen ist es nur ein einfacher Zeiger, aber lassen Sie uns das für einen Moment ignorieren).
Tun:
loader.onload = game.start;
Weist dem Zeiger loader.onload die Funktion game.start zu.
Dann später im Ladecode sehen Sie:
if(loader.onload){
loader.onload();
loader.onload =undefined;
}
Grundsätzlich wird geprüft, ob loader.unload etwas zugewiesen wurde (undefined wird in Javascript als falsch angesehen). Wenn es die Funktion aufgerufen hat, auf die es zeigt, setzen Sie den Zeiger zurück auf undefined.
Die obige Erklärung beschönigt einige Fakten über Javascript. Aber im Grunde ist es das, was los ist.
Der Loader ist ein Objekt und
loadImageist eine darauf definierte Eigenschaft.Die Eigenschaft
loader.onloadist ein Zeiger auf eine Funktion (anonym)loader.onload = game.start;// bringt loader.onload auf game.start. das heißtgame.start() === loader.onload();