Ok so here is my situation:

1) I have an image that ranges from 6000px to 10,000px wide (depends on the image).
2) the image is no more then 500kb in file size, its a transparent PNG8
3) the image is a large floor plan
4) the image is scaled when a user clicks on an area button. Javascript then positions the map in the viewport so that the desired area is displayed and the image is then scaled so the entire area is visible. This is inside a div that is 800x600px with overflow hidden.

so the issue is that I do wait until the image is fully loaded before i fade it into view but the problem is when i'm using Effect.Appear(); (scriptaculous/prototype), if the image is scaled significantly then the Appear effect is really choppy. If the image isn't scaled all that much its very smooth. Is there a way to improve it when images are scaled significantly so its not choppy?

11/20/2008 11:47:56 AM

May not exactly solve your problem, but you could position a solid colored box over your map area, then fade that in and out.

11/20/2008 12:17:34 PM

Stein, you're a genius. That is exactly what I will do. I will have to use two solid colored boxes because I have two images of the same size being loaded (both are choppy).

layer 1) is a transparent map which loads above layer 2)

layer 2) is an overlay of the map that shades in the areas surrounding the area you are looking at as to highlight the area of interest.

so I will just use a solid color between the two layers and a solid color above the map layer. The map layer fades in first then the overlay fades in about a second later.

11/20/2008 1:05:20 PM

^^Yep, I used a similar solution. Avoid having any raster images fade in/out when possible. Fade vector elements to fake the raster fade.

11/20/2008 6:48:11 PM

the other issue I was having in regards to the choppyness with Effect.Appear was that when I created a new Image object in javascript I was setting image.src before image.onload = function() {code goes here}. Which is an issue with both cached images AND in IE. so in combination of fixing both this issue and the solution stein posted made things work a lot smoother.

11/20/2008 6:54:04 PM

heh, remember the LAYER tag? lolz

11/20/2008 9:14:58 PM

lol, i came in here to suggest fading a vector object over the top of it

but you guys have already taken care of that

good job, tech talk, i'm proud of you

11/20/2008 11:02:18 PM