cargar imagenes

[xonil]

Hola a todos, paso a explicar lo que quiero hacer y lo que me ocurre.

Estoy desarrollando un juego de ajedrez en javascript, para ello utilizo como tablero una imagen que se pinta en un canvas, y luego las fichas son puestas encima del tablero.

El problema es que son imágenes png con transparencia, lo cual las hace muy pesadas (no bajan de los 200 bits), y como al inicio de la partida, se tiene que cargar todo por primera vez, a veces no me aparecen todas las fichas.


os paso el código para que veais como lo hago y si se puede mejorar o hacer de otra manera mejor.

antes de nada decir que como no esta la opción de quitar una imagen aisladamente, lo que hago es borrar todo y volver a imprimir todas las imágenes denuevo.

esta funcion lo que hace es llamar a otra función, donde le paso una variable que contiene el nombre de la pieza a dibujar, y luego dos coordenadas.

Código Javascript:

//funcion para dibujar las piezas con negras
function dibuja_piezasN()
{
    dibuja_piezaB(a1, 452, 67);
    dibuja_piezaB(a2, 452, 122);
    dibuja_piezaB(a3, 452, 177);
    dibuja_piezaB(a4, 452, 232);
    dibuja_piezaB(a5, 452, 287);
        .....
}
 

y esta es la función que pinta imagen a imagen.
todo esto se hace despues de redimensionar el canvas para borrarlo e imprimido.

Código Javascript:

//funcion que dibuja la pieza en el canvas / tablero
function dibuja_piezaB(pieza, x, y)
{
 
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var dibujo = new Image();
 
    if (pieza != "")
    {
        
        var ruta=compone_ruta(pieza);
        dibujo.src=ruta;
        
        dibujo.onload = function ()
        {
            ctx.drawImage(dibujo, x, y);
        }
    }
    return;
}////////////////////////////////////////////////////////
 

según entiendo yo, no debería de imprimir la imagen hasta que esta no esté cargada, lo que ya no sé es si de la manera que lo hago, pues se salta ese paso o simplemente es muy pesado todas las imagenes.

A veces me carga todas y otras veces faltan algunas, e incluso me ha llegado a suceder que no ha imprimido ni una sola imagen, solo el tablero.

Una vez empezado a mover, ya no falla, por lo que le hecho la culpa a la carga inicial de las imagenes.

¿alguna sugerencia?

Se me olvidaba, la ruta la compongo utilizando el nombre de la pieza, es decir, según el valor de la variable.
Saludos.