JavaScript图像加载器无法正常工作

我试图为我的游戏制作非常简单的图像加载器，但我无法找出为什么这不起作用..这是我的代码：

window.onload = function() { var canvas = document.getElementById('gameCanvas'); var ctx = canvas.getContext('2d'); var images = []; function loadImages(imageFiles) { var loadedImages = []; for(var i = 0; i < imageFiles.length; i++) { var image = new Image(); image.onload = function() { alert("Loaded"); } image.src = imageFiles[i]; loadedImages[i] = image; } return loadedImages; } function init() { images = loadImages(['img/1.png', 'img/2.png']); main(); } function main() { ctx.drawImage(images[1], 0,0); } init(); } 

我只看到没有图像的空白canvas。

Answer 1

使用Promise ，Promise对象用于延迟和异步计算。 Promise表示尚未完成的操作，但预计将来会发生。

Promise.all() ， Promise.all(iterable)方法返回一个promise，它在iterable参数中的所有promise都已解析时解析。

 function loadImages(imageFiles) { var promiseArr = []; for (var i = 0; i < imageFiles.length; i++) { var eachPromise = new Promise(function(resolve, reject) { var image = new Image(); image.onload = function() { alert('Loaded!'); resolve(); } image.src = imageFiles[i]; }); promiseArr.push(eachPromise); } return promiseArr; } function init() { var AllImages = ['http://sofzh.miximages.com/javascript/earth-day-2016-5741289212477440.2-5643440998055936-ror.jpg', 'http://sofzh.miximages.com/javascript/earth-day-2016-5741289212477440.3-5700735861784576-ror.jpg']; var allPromises = loadImages(AllImages); Promise.all(allPromises).then(function() { alert('All Loaded'); main(); }); } function main() {} init(); 

Answer 2

尝试更换

 image.onload = function() { alert("Loaded"); } 

同

 if(i==1){ image.onload = function() { main(); }} 

当第二个图像被加载时，您的函数被调用然后编辑代码以满足您的需要我将在一段时间内编辑更多

Answer 3

图像以异步方式加载，因此当您尝试在main中读取文件时，图像仍在加载。 所以你需要等到所有图像都加载完毕。

 window.addEventistener("load", function() { var canvas = document.getElementById('gameCanvas'); var ctx = canvas.getContext('2d'); var images = []; function loadImages(imageFiles, completeFnc) { var loadedImages = [], loadedCnt = 0; for(var i = 0; i < imageFiles.length; i++) { var image = new Image(); image.onload = function() { loadedCnt++; //increment the count if(loadedCnt==imageFiles.length) { //if count equals total, fire off callback completeFnc(); } }; image.onerror = function () { alert("There was a problem loading the images"); }; image.src = imageFiles[i]; loadedImages[i] = image; } return loadedImages; } function init() { images = loadImages(['img/1.png', 'img/2.png'], main); } function main() { ctx.drawImage(images[1], 0,0); } init(); }); 

Answer 4

这应该更好

 var images = ['img/1.png', 'img/2.png'], loadedImages = [], canvas,ctx, idx=0: function main() { ctx.drawImage(images[1], 0, 0); } function loadImages() { if (loadedImages.length == images.length) { main(); return; } var image = new Image(); image.onload = function() { loadedImages.push(this); loadImages(); idx++; } image.src = imageFiles[idx]; } function init() { canvas = document.getElementById('gameCanvas'); ctx = canvas.getContext('2d'); loadImages(); } window.onload = function() { init(); } 

Answer 5

您需要将项目推送到数组中。 更换

 loadedImages[i] = image; 

同

 loadedImages.push(image);