Html5 canvas images not showing or image not uploaded

Question

I delete the link to the reason for copyright! .. Sorry!

When you are in Firefox, the images on the left (the entire layout) are loaded after several updates, in chrome and safari, NEVER show

I think this image is not loaded into the memory problem, but I don’t know when all the images are loaded, I event puts the script at the end, but will fail

So, the question is what to do to make the images uploaded ... is there a bug and JavaScript code?

nb I'm tough on encoding images like base64 to display a canvas ... is it possible or reasonable to do this?

Answer 1

Actually, you can determine when all the images have finished loading. To do this, you just need to specify the callback function for the onload property of the image object. So, you end up with something like this (in addition to the code you already have 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; } } 

The basic concept is that you keep track of the number of images that have finished uploading. Once all the images have been uploaded, you know that you can draw on canvas.