Guru Tip: Avoid the HTML5 FOUJUI Experience
For instance, this HTML displays some gif (probably animated) that lets users know that their page is being prepared:
<img src="styles/BlueOpal/loading-image.gif" alt="Loading Image"
I use it with this CSS:
In my main page, I wire up code to that event to hide my loading screen:
Now users see the loading screen until my app finishes initializing. Then the loading screen fades out to reveal the UI -- without FOUJUI.
The richness of HTML5 Web apps is great, but it includes extra challenges like FOUJUI as you make the transition to the client. One of the things that we're doing with the Kendo UI is provide another solution: server-side helpers that render the HTML on the server before sending it to the user. In the meantime, you have to check your apps for any unintended flashing.
Todd had more to say on improving this solution (including incorporating CSS3 Transitions) on his blog.
Posted by Peter Vogel on 03/25/2012 at 1:16 PM