0

I have to draw multiple images on one canvas. I make a program that works, though, I have to speed up the display. I see images appear one by one:

var ctx = document.getElementById('images_tiles').getContext('2d');
function handler() {
    var i = this.i;
    ctx.drawImage(this.img_src, this.r * tileSize, this.c*tileSize,  tileSize * tileList[i].qw, tileSize * tileList[i].qh);
}


//Draw tiles in spiral
for (i=0; i<tileList.length; i++)
{
    var o = { img_src: new Image, c: tileList[i].y, r: tileList[i].x, i: i };
    o.img_src.onload = handler.bind(o);
    o.img_src.src =  './viewer/images/'+path+'/LOD'+glod+'/tiles_'+ o.c + '_' + o.r +'.jpeg';
}

I see Webworker can make parallelization but not for display. So do you have a solution or/and a trick.

Script47
  • 14,230
  • 4
  • 45
  • 66
Lilice
  • 47
  • 5
  • You are displaying the image as they load, loading images is relatively slow. You should wait until they have all loaded, then display them. – Blindman67 Jul 11 '16 at 12:45
  • This with not improve the speed, just draw the images in the same time instead of one by one ? – Lilice Jul 11 '16 at 12:53
  • The browser can draw 100s of medium sized images every 60th of a second, but it can not do this if you are loading them from an external source such as a Hard drive, Networks, or other mass storage sources. – Blindman67 Jul 11 '16 at 14:42
  • [Preload](http://stackoverflow.com/questions/30578521/how-do-image-preloaders-work/30581295#30581295) all of your images before you try to draw any of them. – markE Jul 11 '16 at 17:17
  • Can we preload images in background ? For me the preloading will just draw all the images at the same time, but it will take the same time to have all theimages, isn't it ? – Lilice Jul 12 '16 at 12:49

0 Answers0