imágenes de lienzo html5 no se muestran o la imagen no se carga

Question

quito el enlace por motivos de copyright! .. lo siento!

Cuando estás en Firefox, las imágenes a la izquierda (en toda la maqueta) se carga, después de unos pocos de refresco, en Chrome y Safari, que nunca muestran

Creo que es una imagen que no está cargado en el problema de memoria , pero no puedo saber cuando la imagen está cargada, en caso de que coloque el script al final, pero no tuve suerte

Así que la pregunta, ¿qué debería hacer para hacer sur las imágenes cargadas ... de está ahí y error en el Código de JavaScript?

n.b. tengo dificultad para codificar las imágenes como base64 para la visualización de lienzo ... ¿es posible o inteligente hacer eso?

Answer 1

En realidad, puede determinar cuándo se han terminado de cargar todas las imágenes. Para hacer esto, solo necesita especificar una función de devolución de llamada para la propiedad onload del objeto de imagen. Por lo tanto, usted termina con algo como esto (además del código que ya tiene en canvas.js):

var loaded_images = 0; 
var image_objects = []; 

// This is called once all the images have finished loading. 
function drawOnCanvas() { 
    for (var i = 0; i < image_objects.length; ++i) { 
     ctx.drawImage(image_objects[i], 0, 0); 
    } 
} 

function handleLoadedImage() { 
    ++loaded_images; 

    // Check to see if all the images have loaded. 
    if (loaded_images == 7) { 
     drawOnCanvas(); 
    } 
} 

document.ready = function() { 
    for (var i=0;i<myimages.length;i++) { 
     var tempimage = new Image(); 
     tempimage.src= myimages[i]; 
     tempimage.onload = handleLoadedImage; 
     image_objects[i] = tempimage; 
    } 
} 

El concepto clave es que desea mantener un registro del número de imágenes que se han terminado de cargar. Una vez que todas las imágenes hayan terminado de cargarse, sabrá que puede dibujar en el lienzo.