Javascript to load image
I have created a html5 web app to display data as well as swipe mimic gestures. I used the JQuery Called Wipetouch plugin. When the gesture erase starts, all I do is redraw all my data with new numbers via a javascript function. I realized that this is not an optimal solution as the images are static and currently load every time I sit down. Any ideas would be great.
change
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';
Apologies for not understanding this earlier. I am drawing images on my canvas and this code runs every time the wipetouch plugin registers swipes. I would like everything to stay on the canvas, so the CSS fix mentioned won't work in my case.
source to share
You can put images in your html and give them a class in css that has display: none ;. Then when you call the function, you can change the class of the rendered image to one with the renderer: block; or, however, you need them to be displayed. Just remember to change the class after scrolling so that the new image appears and the old image is no longer visible. This way they are not generated again every time you invoke swipes.
source to share