Question

I’ve created a html5 web app to display data, and to mimmic swipe gestures I’ve used A Jquery plugin Called Wipetouch. When a wipe gesture is triggered, all I do is redraw all of my data with new numbers via a javascript function. I’ve realized that this isn’t the optimal solution as the images are static, and are currently being loaded every time I swipe. Any ideas would be great.

edit

var img01 = new Image();
enter code here
img01.onload = function () {
    ctx.drawImage(img01, x, y, img01.width * 2, img01.height * 2);
    ctx.fillStyle = "white";
    //draw text
    ctx.font = "bold 28pt Calibri";
    ctx.fillText(monthname[date.getMonth()], x+51, y+135);
    ctx.fillText(d[1], x+47, y+37);
}
img01.src = 'images/retail_car.png';

I apologize for not making this clear earlier. I’m drawing the images on my canvas, and this code is triggered each time the wipetouch plugin registers a swipe. I’d like to make everything stay in the canvas, so the CSS fix that was mentioned won’t work in my case.

Answer 1

You could put the images in your html and give them a class in css that has display:none;. Then when you call the function you could change the class of the displayed image to one with display: block; or however you need them displayed. Just be sure to change the class back after you swipe so that the new image appears and the old image is no longer visible. That way they are not being generated over again each time you call the swipe.