Toggling images

Discussion in 'JavaScript' started by frenz, Feb 13, 2007.

0
  1. #1
    Hi,

    I'm facing a simple problem and would be great if someone could help me out. I have two images play.jpg and pause.jpg. I also have an <img>, in its onclick im calling a javascript function which will toggle between these images each time the image is clicked. The size of the image is 842 bytes which is the maximum I can compress. The problem is that each time I click the image, the image is downloaded from the server and only then it gets displayed, which means it would take around 2-3 seconds for the image to get displayed. I have also tried putting the image in cache this way:

    var Play = new Image();

    But this also has done no good. By the way, once the image is being downloaded from the server, why does it download it each time I click the image? Is there any solution to this.


    Thanks & Regards,
    Frenz
     
    frenz, Feb 13, 2007 IP
  2. nico_swd

    nico_swd Prominent Member

    Messages:
    4,153
    Likes Received:
    344
    Best Answers:
    18
    Trophy Points:
    375
    #2
    You're not preloading it correctly. Try this.

    

var Play = new Image();
Play.setAttribute('src', '/path/to/play.jpg');
    Code (javascript):
     
    nico_swd, Feb 13, 2007 IP