Одда ошибки с DrawImage на HTML5 холсте

Question

JsFiddle (примечание: не показывает ничего, это просто способ для меня, чтобы показать свой код в аккуратном формате) http://jsfiddle.net/h6tVR/

Я новичок в HTML5 холст и решил играть и посмотреть, что я могу с этим сделать. До сих пор я был в состоянии нарисовать локально размещенное изображение на холст и даже сделать несколько базовой черепицу:

window.onload = function(){ 

    var GameClosure = function() { 

     var canv = document.getElementById("canv"); 
     var canvContext = canv.getContext("2d"); 

     var sprite = new Image(); 
     sprite.src = "sprite.png" 

     var tile = new Image(); 
     tile.src = "tile.png" 

     function loadSprite(){ 
      sprite.onload = function(){ 
       canvContext.drawImage(sprite, 50, 50); 
       }; 
     } 

     function loadTiles(){ 
      tile.onload = function(){ 
       for(var i = 0; i < 800; i += 16){ 
        for(var r = 0; r < 608; r += 16){ 
         canvContext.drawImage(tile, i, r); 
        } 
       } 
      }; 
     } 

     return{ 
      loadTiles: loadTiles, 
      loadSprite: loadSprite 
      }; 

    }(); 

    GameClosure.loadTiles(); 
    GameClosure.loadSprite(); 

} 

Я получаю странную проблему с этим. Когда я загружаю его, большую часть времени загружаются только плитки. Я пробовал пару вещей до сих пор, я переключил вызовы GameClosure.loadTiles() and GameClosure.loadSprite();, чтобы посмотреть, не изменился ли порядок загрузки. Это не так. Я даже попытался создать второй контекст и присвоить плитки одному и спрайту другому, но это не имело никакого значения. Комментируя вызов плитки, вы создаете спрайт правильно.

Это становится еще более странным. Я быстро обновлял страницу, и иногда я замечал это (без шаблона, иногда это может случиться 3 раза подряд, в другой раз один раз в 20), плитки будут загружаться, и спрайт будет загружаться сверху, как я ожидал бы этого к.

Можно ли это исправить? Мое единственное предположение: мой код работает несколько асинхронно, а циклы for, создающие плитки, завершаются после того, как спрайт был загружен, но, глядя на мой код, я не вижу, где это может произойти.

Answer 1

Когда вы устанавливаете обработчик onload, ваш javascript будет продолжаться, пока ресурс загружается в фоновом режиме. Обработчик будет выполняться при загрузке ресурса. Вы не можете сказать, когда это произойдет и в каком порядке.

Если у вас есть несколько ресурсов и вы хотите называть свою функцию рисования в момент загрузки последнего, у вас может быть глобальный объект-прелоадер. Каждый обработчик onload должен вызывать функцию на предварительном загрузчике, чтобы сообщить ему, что ресурс загружен. Эта функция должна проверять, были ли зарегистрированы все ресурсы, и когда это произойдет, выполните функцию draw-function.

Также, когда вы устанавливаете обработчик onload и ресурс уже загружен. Когда вы устанавливаете .src и ресурс находится в кеше браузеров, он мгновенно загружается. Поэтому вам всегда нужно комплект .onload и затем комплект .src.

Answer 2

Отделить озабоченность. Подождите, пока все ресурсы будут загружены (и документ), а затем запустите игру. Всегда обязательно подключите обработчик событий до, назначив src, чтобы избежать «случайных» (по сути, связанных с кешем) поведений.