JavaScript 图像加载器不起作用

JavaScript image loader isn't working

本文关键字：不起作用 加载 图像 JavaScript      更新时间：2023-09-26

我正在尝试为我的游戏制作非常简单的图像加载器，但我找不到为什么这不起作用。这是我的代码：

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();
}

我看到的只是没有图像的空白画布。

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

Promise.all()，Promise.all(iterable) 方法返回一个承诺，当可迭代参数中的所有承诺都已解析时，该承诺将解析。 

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 = ['https://www.google.co.in/logos/doodles/2016/earth-day-2016-5741289212477440.2-5643440998055936-ror.jpg', 'https://www.google.co.in/logos/doodles/2016/earth-day-2016-5741289212477440.3-5700735861784576-ror.jpg'];
  var allPromises = loadImages(AllImages);
  Promise.all(allPromises).then(function() {
    alert('All Loaded');
    main();
  });
}
function main() {}
init();

尝试替换

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

跟

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

加载第二个图像时，将调用您的函数然后编辑代码以满足您的需求我一会儿会编辑更多

图像是异步加载的，因此当您尝试在 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();
});

这应该更好用

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();
}

您需要将项目推送到数组中。取代 

loadedImages[i] = image;

跟

loadedImages.push(image);
相关文章：