JavaScript图像加载器无法正常工作 [英] JavaScript image loader isn't working

问题描述

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

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表示尚未完成的操作，但预计会在将来出现.

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

I am trying to make really simple image loader for my game but I can't find out why this isn't working.. Here is my code:

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

All I see is blank canvas without an image.

解决方案

Use Promise, The Promise object is used for deferred and asynchronous computations. A Promise represents an operation that hasn't completed yet, but is expected in the future.

Promise.all(), The Promise.all(iterable) method returns a promise that resolves when all of the promises in the iterable argument have resolved.

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

这篇关于JavaScript图像加载器无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！