Javascript: Объект изображения, похоже, не загружает изображение

Question

Я пытаюсь создать объекты изображения, по одному для каждого из моих игровых активов .png. Создатель изображений makeImage() создает правильный объект, и он имеет правильный путь как свой собственный объект .src, но он не загружает изображение. img.isReady остается false.

Я начинаю как в JavaScript, так и в кодировке, и мне интересно, есть ли какое-то поведение функций или объектов, которые я пропускаю.

var assets = {}; 

function makeImage(path) { 
    var img = new Image(); 
    img.isReady = false; 
    img.onload = function() { 
     img.isReady = true; 
    }; 
    img.src = path; 
    return img; 
} 

assets.tileset = makeImage('images/tileset.png'); 

Answer 1

Рабочая Fiddle: http://jsfiddle.net/anjrLy40/1/

Вопрос заключается в том, что вы вернув изображение img перед изображением нагрузок, что является асинхронным процессом. Вы должны вложить возврат в функцию onload. Попробуйте это:

function createImg(path, nodeID) { 

    var img = new Image(), 
     isLoaded = false; 

    img.onload = function() { 

     document.getElementById(nodeID).appendChild(img); 

     isLoaded = true; 

     alert(isLoaded); 
    }; 

    img.src = path; 
}; 

Функция создается и прикрепляется к IMG object и запускается, как только вы установите path и этот процесс завершается. Вы увидите набор src до того, как функция будет создана в кодах некоторых людей, но это не самый предпочтительный метод.

Ссылка: http://fragged.org/preloading-images-using-javascript-the-right-way-and-without-frameworks_744.html