html5 immagini su tela non mostrare o immagine non caricata

Question

rimuovo il link per motivi di copyright! .. mi dispiace!

Quando si è in Firefox, le immagini a sinistra (tutto il mockup) viene caricato, dopo qualche aggiornamento, in Chrome e Safari, esso esposizione MAI

Penso che sia un'immagine non caricata in problema di memoria ma non posso sapere quando l'immagine è stata caricata, ho messo la sceneggiatura alla fine, ma senza fortuna

Quindi la domanda, cosa dovrebbe fare per far sì che le immagini siano caricate .. di c'è e errore nel Codice JavaScript?

n.b. ho un sacco di problemi con la codifica delle immagini come base64 per la visualizzazione su tela ... è possibile o intelligente farlo?

Answer 1

In realtà, è possibile determinare il completamento del caricamento di tutte le immagini. Per fare ciò, è sufficiente specificare una funzione di callback per la proprietà onload dell'oggetto immagine. Quindi, si potrebbe finire con qualcosa di simile (in aggiunta al codice che già avete in 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; 
    } 
} 

Il concetto chiave è che si sta tenendo traccia del numero di immagini che hanno terminato il caricamento. Una volta che tutte le immagini sono state caricate, sai che puoi disegnare sulla tela.