Topic awaiting preservation: Minimizing a Fade Script's Demand on a Machine

I developed this fade script for use in a site I'm working on, but I and the "boss" have noticed that it can create somewhat of a demand on a user's machine, especially if the machine is a slower one. (The Big Man says his laptop gets pretty bogged down.)

(Incidentally, I still don't consider myself much of a programmer, so I'll admit up front that the technique may be wonky.)

I've tried increasing the fadeIncrement (and the fade times accordingly) so there are fewer steps per fade and that seems to help a little, but not quite enough.

Can anyone think of a way to decrease the load and still keep the fades smooth? If I can't, the Big Man has requested I switch to animated GIFs instead, which I'd rather not do for the sake of pride.

I guess it might have helped had I put this in the right forum ...

I'd try rewriting it using setInterval instead of setTimeout. Then you have one timer that handles all the fading each time it loops through. Right now you are firing a ton of Timeouts which can have a negative effect.

Just for cleanliness and ease I'd create a bunch of objects that do the fading. One for each image. Then have an increment method. Everytime you hit the interval you just go through your array of objects and increment them.

This can continue a fade in (or out), start a new one or do nothing.



.:[ Never resist a perfect moment ]:.

Something like so

function fadeImage(imageName) {
    this.image = document.getElementById(imageName);
    this.state =  0 //0 nothing 1, fading in, 2 fading out     

     this.fadeIn = new function() {
         // do fade in
     }
      
      this.fadeOut = new function() {
       // do fade out
      }

      this.increment = new function() {
          switch(this.state) {
               case 0:  // do I start a new fade?
               case 1: // continue fading
           }
       }

  
}

Anyway I hope this helps.

.:[ Never resist a perfect moment ]:.

20 milliseconds is really, really short. Think about it, that's 1000/20 = 50 times per second. Try something more like 100 or 200.


 

** bored at work **

I did a quick rewrite with the above ideas here You can look or not look as you choose. I'm not sure I got the functionality you wanted just right and I can't tell if there's much of a performance boost, on my work machine even your old page barely pings anything on my task manager.



.:[ Never resist a perfect moment ]:.

quote:

---

20 milliseconds is really, really short.

---

I understand what you mean. But if I increase the time to 100 ms, I have to increase the amount of fade to 10% per step in order to have the total fade complete with the same speed, which ends up looking jerky.

I appreciate your effort in the rewrite, bd, but for some reason it actually made it worse.



Personally, I don't notice any drag on my machine, either, but the client notices it big time on his laptop.

From what I've recently read, it's the actual rendering of the transparency that somehow takes so much processor time, so I'm not sure rewriting the script is going to help much for those working on slow machines. Looks like I'll have to go with the animated GIF solution ... feh.

Thanks, anyhow.