My CMS project has a stylish web 2.0 login screen that fades over the screen using javascript. How come that even though I have made 120% sure that images are preloaded (I used the resource monitor in development tools) they still take a second to show up when my login screen appears. It completely destroys the fanciness! Take a look:
http://www.dahwan.info/Melior (link broken)
When you click login, the screen is supposed to fade to dark using a 75% alpha 1px png image. Even though the image is preloaded, it doesn’t show up until after the animation is done. However, if you click cancel and log in again, the animation flows smoothly and perfectly.
Can anyone think of a solution to this problem? I’m having it with the rest of my CMS’ GUI as well. It’s like there was no image preloading what so ever.
Thanks for answers
EDIT: Ah yes, I’m currently developing this CMS for Google Chrome 5.0.375.99, adding multi browser compatibility later. Sorry for leaving that out
I have come up with a workaround to my problem. I have now tested this in three browsers on two different computers with perfect results. In short, in my image preloading function in javascript, i added each of the images into the DOM in an invisible Div tag.
The images now being added to the Dom at page load, and according to my theory resting in the memory of my low-end computers, they appears instantly when my CMS needs them.
Thanks for your comments 🙂