Flicker in Rollover states

[David Marrs]

We could do with combining the images that can be rolled over, and the images that are displayed when they are rolled over, into sprites. Currently when an image is rolled over, there is a slight delay before the replacement image is shown while said replacement image is retrieved from the server. If the replacement image was in a sprite with the original image it would be available immediately.

[udemi]

Ah ok, I understand what you mean... You wanto to create a single image that contains the 2 version (normal and rollover).... yes, but this solution is not compatible with the rollover script that i'm using.. this problem of the delay to get the "rollover" image is only on the first time you load the page, because after that the images are in cache.... So I don't think that is a big problem... not?

[David Marrs]

Ah, I thought you were using CSS to handle the rollover states? If you are using JavaScript, you should use a pre-loader for the rollover images.

At some point we should swap to CSS.

[udemi]

well, the rollover image is loaded only when it's requested (on mouse over)... so you see a little delay only for the first time.... so pre-loader doesn't solve this "problem"...

swap all to css is a solution but it's less flexible...

[David Marrs]

A pre-loader would request the image at the point when the page is rendering, loading it into cache, in time for any mouse over event that may fire when the page is then used. This is a solution I remember using back when I was starting out with an old copy of dreamweaver (with table-based layouts and js rollovers, back when it was published by Macromedia!). I thought I would dig out some example code for you, and actually found this stack overflow post which makes reference to that Dreamweaver code :-)

http://stackoverflow.com/questions/761263/what-is-the-best-way-to-preload-multiple-images-in-javascript

[udemi]

TO SOLVE THIS PROBLEM USE: epu.imgStaticRollover(specificImgsClassDOM, enumRolloverType, imageSuffix, waitForLoading)

where if you specify "waitForLoading" value to TRUE, it preloads the rollover images

[udemi]

I don't used my EPU library because to do that, we need to do some js refactoring...

For the JS flickering of images, I added some lines of code to preload images. (already done)

For the CSS flickering, I will use a 3rd party script to preload images.....

[udemi]

I correct my comment: For the 2nd problem we need to create a single image that contains normal\hover\active states

[udemi]

solved