Javascript no properly loading images/png files

I am re-imagining a game of pacman that uses facebook and twitter credentials.
I am using javascript to generate the map via a World class, that gets number of tiles on width and height, and a bidimensional array as a hardcoded map.
So far so good, I succeeded in generating the map, but my main problem is that the map sometimes is not being loaded on page access. I have used

  $(window).load(function(){});

but it has the same behaviour

This is my world class that draws the sprites

 var World = function(width, height, map){
  this.height = height;
  this.width = width;
  this.map = map;

  this.draw = function(){
   for(i = 0; i < this.width; i++){
  for(j = 0; j < this.height; j++){
    //console.log(this.map[i][j]);
    if(world.map[i][j] === 0){
      var mapSprite = new Sprite('images/empty.png', i, j);
      mapSprite.draw();
    }
    if(world.map[i][j] === 1){
      var mapSprite = new Sprite('images/point.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 2){
      var mapSprite = new Sprite('images/corner-left-up.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 3){
      var mapSprite = new Sprite('images/corner-right-up.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 4){
      var mapSprite = new Sprite('images/left-side.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 5){
      var mapSprite = new Sprite('images/right-side.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 6){
      var mapSprite = new Sprite('images/corner-right-down.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 7){
      var mapSprite = new Sprite('images/top-side.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 8){
      var mapSprite = new Sprite('images/bottom-side.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 9){
      var mapSprite = new Sprite('images/corner-left-down.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 13){
      var mapSprite = new Sprite('images/pilon.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 14){
      var mapSprite = new Sprite('images/pilon-middle.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 15){
      var mapSprite = new Sprite('images/cross.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 16){
      var mapSprite = new Sprite('images/ghost-box-left-corner-up.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 17){
      var mapSprite = new Sprite('images/ghost-box-left-corner-down.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 18){
      var mapSprite = new Sprite('images/ghost-box-right-corner-down.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 19){
      var mapSprite = new Sprite('images/ghost-box-right-corner-up.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 20){
      var mapSprite = new Sprite('images/exit-left-up.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 21){
      var mapSprite = new Sprite('images/exit-right-up.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 22){
      var mapSprite = new Sprite('images/exit-left-down.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 23){
      var mapSprite = new Sprite('images/exit-right-down.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 24){
      var mapSprite = new Sprite('images/ghost-box-left-side.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 25){
      var mapSprite = new Sprite('images/ghost-box-right-side.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 26){
      var mapSprite = new Sprite('images/ghost-box-bottom.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 27){
      var mapSprite = new Sprite('images/obstacle-up.png', i, j);
      mapSprite.draw();
    }
    else if(world.map[i][j] === 28){
      var mapSprite = new Sprite('images/obstacle-inside.png', i, j);
      mapSprite.draw();
    }
  }
}
}
};

and this is the call:

$(document).ready(function(){
//initialization

Context.create("canvas");
world = new World(25, 20, map);
//world.draw();
console.log('in the document event');
});

$(window).load(function(){
  console.log('Window load event!');
  world.draw();
 });

Should I be pre-loading the sprites?
All I know is that the window event should trigger the code once all the images are loaded.
Also, is there a better alternative, as I’ve seen that the window.load even does not full support cross webbrowsing

I have no idea what your Sprite function is doing, but you can preload images like:

function preloadImages(arr, callback) {
  var newimages = [];
  var loadedimages = 0;
  var arr = (typeof arr != "object") ? [arr] : arr;

  var imageLoaded = function() {
    loadedimages++;
    if (loadedimages == arr.length) {
      callback();
    }
  }

  for (var i=0; i<arr.length; i++) {
    newimages[i] = new Image();
    newimages[i].src = arr[i];
    newimages[i].onload = imageLoaded;
    newimages[i].onerror = imageLoaded;
  }
}

preloadImages(['1.gif', '2.gif', '3.gif'], function() {
  // All loaded
})

Original taken from http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.