Как работает onload в Javascript?

Question

В книге Pro HTML5 игры есть следующий фрагмент кода:

// 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 loaded), а не imageThatWeWantToLoad.onload = (do what we want to do after image has been loaded)?

2) Что делает loader.onload=game.start; часть делает (игра является объектом, а начало - методом, определенным внутри игрового объекта) точно? Думаю, я понял, что loader.onload=game.start; означает, что после загрузки объекта-загрузчика будет вызываться game.start, но так как game.start - это метод, не должно быть loader.onload=game.start();?

3) Кроме того, onload означает 'данные, полученные браузером'?

Answer 1

1) image.onload не является внутренне метод. Это просто свойство, так же, как name свойство в dog после выполнения

dog = { name: null }; 

Свойства объекта является методом, если он содержит функцию. Так,

dog['bark'] = function() { console.log("Woof"); }; 

Теперь мы могли бы сделать dog.bark() для вызова этого метода.

Если image.onload является способом (то есть, если он содержит функцию) во время загрузки изображения, он будет запускаться браузером. Это не метод, который предназначен для нас, чтобы позвонить, это для нас определить.

2) Он делает именно то, на что похоже: присваивает содержимое game.start (функция) до loader.onload. Теперь оба свойства относятся к одной и той же функции. Если бы мы сделали loader.onload = game.start(), он выполнил бы game.start и назначил результат исполнения loader.onload; но мы хотим назначить эту функцию, поэтому нет скобок.

Answer 2

Свойство loader.onload является указателем на функцию (технически это простой указатель, но на этот раз не будем игнорировать).

Выполнение:

loader.onload = game.start; 

Назначает функцию game.start указателю loader.onload.

Тогда позже, в коде загрузчика вы видите:

if(loader.onload){ 
    loader.onload(); 
    loader.onload =undefined; 
} 

Это в основном проверяет loader.unload было ничего назначено (undefined считается ложным в JavaScript). Если он вызывает функцию, на которую указывает, то установите указатель обратно на undefined.

Объяснение выше глянца над несколькими фактами о javascript. Но это в основном то, что происходит.

Answer 3

1. Погрузчик является объектом, а loadImage - это свойство, определенное на нем.

2. Свойство loader.onload является указателем на функцию (анонимной)

3. loader.onload = game.start; // делает точку loader.onload в game.start. т.е. говоря game.start() === loader.onload();

Answer 4

OnLoad в JavaScript может быть описана как:

1. OnLoad здесь доступен как собственность, и мы присваиваем свойство с результатом функции. Таким образом, функция будет выполнена, и конечный результат будет присвоен свойству. Таким образом, в основном вызов функции и назначение результата для свойства выполнялись одновременно в одной строке кода.

2. В этом случае мы хотим знать, выполнялся ли метод loadload onload или нет, проверяя свойство loader.loaded. Если он выполнил, то вызовите функцию game.start() без назначения какой-либо функции для выполнения в последовательности, как это сделал метод onload. Если он не был выполнен, мы назначили функцию game.start для функции load.onload, поэтому мы использовали их как свойство для назначения функции другой функции, поэтому теперь, когда будет вызываться метод onload, он теперь выполнит game.start(), так как onload заменяется на game.start.

3. Onload означает, что объект был загружен. Мы используем событие onload в теге body html, чтобы знать, что веб-страница загрузила весь контент, и теперь мы можем выполнять наши действия для плавного функционирования.