.NET Tips and Tricks

Blog archive

Guru Tip: Avoid the HTML5 FOUJUI Experience

As I continue to incorporate more JavaScript into my applications and, especially, as I try to leverage the new JavaScript/HTML 5 technologies, I'm discovering a new problem: It's now possible for users to see raw, uninitialized HTML in their browser before my JavaScript properly arranges things. I asked Todd Anglin, VP for HTML5 Web & Mobile Tools at Telerik, if there was a solution to this problem. Here's what he said:

This is a new problem that can ruin the fancy, new experience of your HTML5 app. I think of it as FOUJI, or Flash of Uninitialized JavaScript UI: Users see the ugly HTML briefly and then, suddenly, the page looks right. One solution for this problem is to use a JavaScript loading screen that "hides" the page HTML as it initializes.

For instance, this HTML displays some gif (probably animated) that lets users know that their page is being prepared:

<div id="preLoad">
  <div>
    <img src="styles/BlueOpal/loading-image.gif"  alt="Loading Image"
 style="width:48px;" />
    <br />Loading...
  </div>
</div>
I use it with this CSS:
#preLoad{            
    width:100%;
    height:100%;
    background:#FFF;
    position:absolute;
    top:0;    
}        
 
#preLoad div{
    position:absolute;
    top: 50%;
    left: 50%;
    height:60px;
    margin-top: -30px;
    margin-left: -24px;
}

To make the loading screen "go away" when I've finished setting it up, I trigger a new event when the JavaScript that initializes my page is complete:

$(document).trigger("APP_READY");
In my main page, I wire up code to that event to hide my loading screen:
$(document).bind("APP_READY",function(){ 
    $("#preLoad").fadeOut(); 
});

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


comments powered by Disqus

Featured

  • Creating Reactive Applications in .NET

    In modern applications, data is being retrieved in asynchronous, real-time streams, as traditional pull requests where the clients asks for data from the server are becoming a thing of the past.

  • AI for GitHub Collaboration? Maybe Not So Much

    No doubt GitHub Copilot has been a boon for developers, but AI might not be the best tool for collaboration, according to developers weighing in on a recent social media post from the GitHub team.

  • Visual Studio 2022 Getting VS Code 'Command Palette' Equivalent

    As any Visual Studio Code user knows, the editor's command palette is a powerful tool for getting things done quickly, without having to navigate through menus and dialogs. Now, we learn how an equivalent is coming for Microsoft's flagship Visual Studio IDE, invoked by the same familiar Ctrl+Shift+P keyboard shortcut.

  • .NET 9 Preview 3: 'I've Been Waiting 9 Years for This API!'

    Microsoft's third preview of .NET 9 sees a lot of minor tweaks and fixes with no earth-shaking new functionality, but little things can be important to individual developers.

  • Data Anomaly Detection Using a Neural Autoencoder with C#

    Dr. James McCaffrey of Microsoft Research tackles the process of examining a set of source data to find data items that are different in some way from the majority of the source items.

Subscribe on YouTube