CODEWITHSUNDEEP
javascriptimagehtmlloading
kshreve
kshreve

Reputation: 330

Javascript Loading Image

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.

Upvotes: 3

Views: 2540

Answers (1)

Digital Brent
Digital Brent

Reputation: 1281

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.

Upvotes: 1

Related Questions