Before loading images with javascript, what is the right way to do this?

Question

I’m having trouble uploading images to the server. I would like to know what is the correct way to pre-load these images.

// JavaScript Functions
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

function load(){
    var colors = ["http://meusite.com/pasta/img/playerRightC.png","http://meusite.com/pasta/img/playerLeftC.png","http://meusite.com/pasta/img/playerRight.png","http://meusite.com/pasta/img/playerLeft.png","http://meusite.com/pasta/img/wallpaper01.png","http://meusite.com/pasta/img/cheese.png","http://meusite.com/pasta/img/toca.png","http://meusite.com/pasta/img/help1.png","http://meusite.com/pasta/img/help2.png","http://meusite.com/pasta/img/help3.png","http://meusite.com/pasta/img/cnImg.png"];

    for (color in colors) {
        var img = new Image();
        img.src = colors[color];
    }

}

load();

sleep(6000).then(() => {
    StartGame(); 
});;


window.addEventListener('keydown', KeyDown, true);

I added a 6000ms delay to start the game, so the images could be loaded by the load function.

However, the images are not preloaded, yet there is a delay from 0.5ms to 2.0s on slower connections trying to play the game. Is this way of loading the images correct? It has a more effective way?

Answer 1

I don’t think it’s a good try guess the loading time of the images, because this can vary greatly depending on the connection, weight or amount of images.

You can create a img.onload for each image. Thus, the function StartGame() will only be called after all images have been uploaded.

Create a counter by starting 0, and as each image is loaded, it will increment the counter and when it is equal to the size of the array, the function is called:

function load(){
   var colors = ["http://meusite.com/pasta/img/playerRightC.png","http://meusite.com/pasta/img/playerLeftC.png","http://meusite.com/pasta/img/playerRight.png","http://meusite.com/pasta/img/playerLeft.png","http://meusite.com/pasta/img/wallpaper01.png","http://meusite.com/pasta/img/cheese.png","http://meusite.com/pasta/img/toca.png","http://meusite.com/pasta/img/help1.png","http://meusite.com/pasta/img/help2.png","http://meusite.com/pasta/img/help3.png","http://meusite.com/pasta/img/cnImg.png"];

   var num_imgs = colors.length; // conta a array
   var conta_imgs = 0; // contador
   for (color in colors) {
      img = new Image();

      img.onload = function(){ // evento onload
         conta_imgs++; // incrementa o contador quando uma imagem é carregada
         // quando forem iguais, chama a função
         if(conta_imgs == num_imgs) StartGame();
      }

      img.src = colors[color];
   }
}