Pro HTML5 Games一书中有以下代码:
// 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;
}
}
加载器对象如下:
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;
}
}
}
我有以下问题:
1)如果 onload 是一个方法,我们是否不应该使用它,例如 imageThatWeWantToLoad.onload(stuff we Want to do after image has been load)
,而不是 imageThatWeWantToLoad.onload =(加载图像后执行我们想要执行的操作)
?
2)loader.onload=game.start;
部分到底是做什么的(game是一个对象,start是游戏对象内部定义的方法)?
我想我明白 loader.onload=game.start;
意味着一旦加载器对象被加载, game.start
将被调用,但由于 game .start
是一个方法,不应该是 loader.onload=game.start();
吗?
3)此外,onload
表示“浏览器接收到的数据”?
最佳答案
属性loader.onload
是一个指向函数的指针(从技术上讲,它只是一个普通的指针,但我们暂时忽略它)。
正在做:
loader.onload = game.start;
将函数 game.start
分配给指针 loader.onload
。
然后,在加载器代码中您会看到:
if(loader.onload){
loader.onload();
loader.onload =undefined;
}
它主要检查 loader.unload
是否已分配任何内容(undefined
在 JavaScript 中被视为 false)。如果它调用了它指向的函数,则将指针设置回undefined
。
上面的解释掩盖了有关 javascript 的几个事实。但这基本上就是正在发生的事情。
关于javascript - onload 在 JavaScript 中如何工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32132343/