Функция предварительной загрузки изображений - нужно нарисовать их сейчас, но как?

Question

Я занимаюсь холстом. И я немного что-то потерял.

У меня есть эта функция:

function preloadimages(arr) { 
     var newimages = [] 
     var arr = (typeof arr != "object") ? [arr] : arr 
     for (var i = 0; i < arr.length; i++) { 
      newimages[i] = new Image() 
      newimages[i].src = arr[i] 
     } 
    } 

И я называю это так:

preloadimages(['images/background.png', 'images/hero.png', 'images/monster.png']); 

Единственная проблема, я не знаю, как потом сделать их позже.

Если бы я был поджимать одно изображение внутри моих JS я бы сказал:

var bgOk = false; 
var bg = new Image(); 
bg.onload = function() { 
    bgOk = true; 
}; 
bg.src = "images/background.png"; 

, а затем дальше вниз, когда я хотел это обращается, я бы сказал:

if (bgOk) { 
     context.drawImage(bg, 0, 0); 
    } 

И это было бы что. Проблема в том, что я создал класс preloader, я действительно не знаю, как теперь вызывать только изображение, которое я хочу сейчас рисовать, или даже как реализовать идею bgOk, чтобы, если она загрузилась нормально, я могу ее нарисовать, и если нет, оставьте это в покое.

Может кто-нибудь посоветует мне об этом? Я в основном просто пытаюсь перейти скорее на класс, а не на грязный большой беспорядок, который у меня обычно есть с огромным javascript-файлом, который является уродливым, а не ремонтируемым.

Answer 1

Это, кажется, сложная проблема, но на самом деле это не так плохо, как кажется. Если вы хотите использовать уже существующий код или просто хотите взглянуть на что-то для идей, вы можете посмотреть: http://thinkpixellab.com/pxloader/ Эта библиотека использовалась в версии HTML5 Cut The Rope.

Простой пользовательский реализация может быть что-то вроде следующего:

function loadImages(arr, callback) { 
    this.images = {}; 
    var loadedImageCount = 0; 

    // Make sure arr is actually an array and any other error checking 
    for (var i = 0; i < arr.length; i++){ 
     var img = new Image(); 
     img.onload = imageLoaded; 
     img.src = arr[i]; 
     this.images[arr[i] = img; 
    } 

    function imageLoaded(e) { 
     loadedImageCount++; 
     if (loadedImageCount >= arr.length) { 
      callback(); 
     } 
    } 
} 

И тогда вы можете назвать это так:

var loader = loadImages(['path/to/img1', 'path/to/img2', 'path/to/img3'], function() { 
    ctx.drawImage(loader.images['path/to/img1']); // This would draw image 1 after all the images have been loaded 

    // Draw all of the loaded images 
    for (var i = 0; i < loader.images.length; i++) { 
     ctx.drawImage(loader.images[i]); 
    } 
}); 

Если вы хотите более подробную информацию о загрузке активов вы можете иметь посмотрите раздел загрузки активов в курсе разработки HTML5 игры Udacity https://www.udacity.com/course/cs255

Answer 2

Функция я использую:

function ImageLoader(sources, callback) 
{ 
    var images = {}; 
    var loadedImages = 0; 
    var numImages = 0; 

    // get num of sources 
    for (var src in sources) { 
     numImages++; 
    } 

    for (var src in sources) { 
     images[src] = new Image(); 
     images[src].onload = function() { 

      if (++loadedImages >= numImages) { 
       callback(images); 
      } 
     }; 
     images[src].src = sources[src]; 
    } 
} 

Вы называете это так:

var sources = { 
    bg: path/to/img.png, 
    title: path/to/img/png 
}; 

var _images = {}; 
isReady = ImageLoader(sources, function(images) { 
    _images = images; 
}); 

, а затем доступа к изображениям

_images.bg; 

Пример:drawImage(_images.bg, 0, 0);