Why is this JavaScript image resize script slow?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • HaLo2FrEeEk
    Contributor
    • Feb 2007
    • 404

    Why is this JavaScript image resize script slow?

    I wrote some code that basically imitates Lightbox. Images that are too large will stretch the layout of my forum, so this code resizes them to an acceptable width (maintaining aspect ratio) and makes them clickable. When clicked, the page darkens (gradual fade) and a box opens up with the image inside it (gradual fade in). Check out an example here:

    Own this domain today. We make your shopping experience easy. Friendly and quick customer service.


    I've always been able to figure out ways to do things I want done, but it's usually hacked together and while i works, it's certainly not the best way to do it. This is one of those cases. It's almost painfully slow on my computer, and I have 8 gigs of RAM and a 512MB GPU (3.0GHz dual core CPU.) Other sites that do this (using either Lightbox or some other code) don't have the same problem, and everything happens very quickly and smoothly.

    I think it has to do with how many loops and settimeouts I'm doing, jumping between functions and all that, but I can't seem to pinpoint exactly what's causing the problem. If someone here could be so kind as to take a look at it for me, I would be ever so grateful. Here is a direct link to the Javascript file:



    Thanks very much in advance, and please forgive how messy the code is, it makes perfect sense to me, but it gives other people headaches.
  • JKing
    Recognized Expert Top Contributor
    • Jun 2007
    • 1206

    #2
    What is your definition of slow? It popups and slides in under two seconds for me in firefox.

    My computer is also significantly slower.
    AMD Athlon 64 3200 2.0 GHZ 2GB RAM

    Comment

    • HaLo2FrEeEk
      Contributor
      • Feb 2007
      • 404

      #3
      It just seems jumpy. The fadeout is supposed to happen in 40 milliseconds, since I'm adding 10 to the opacity and doing a setTimeout for 5 milliseconds. After that the height and width should grow in 100 milliseconds each, so we're at 240 milliseconds. Finally, the picture fadein should take 40 milliseconds, so all in all this should take less than half a second. Of course, I know Javascript isn't that fast, but taking two seconds to do it's thing is way too long.

      Could you just take a look at the code and help me clean things up?

      Comment

      Working...