JavaScript Image Loader Isn't Working

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.get

Solution 1:

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

Solution 2:

try replacing

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

with

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

when the second image is loaded, your function is called then edit the code to suit your needs I will edit more in a while

Solution 3:

Images are loaded asynchronously so when you try to read the file in main, the image still is loading. So you need to wait until all the images are loaded.

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

Solution 4:

This should work better

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

Solution 5:

You need to push items into an array. Replace

loadedImages[i] = image;

with

loadedImages.push(image);